npmpackage.info

Gathering detailed insights and metrics for form-payload

Other packages similar to form-payload

@payloadcms/plugin-form-builder

3.40.0

Form builder plugin for Payload CMS

complex-form-generator

1.0.5

Customize and generate React forms for complex payloads

payload-plugin-form-builder

1.0.8

Form builder plugin for Payload CMS

@finkinfridom/payload-plugin-form-builder

1.0.15

Form builder plugin for Payload CMS

Gathering detailed insights and metrics for form-payload

form-payload - 1.7.3 | npmpackage.info

form-payload

Gets proper form payload – via form.elements.

1.7.3

MIT

JavaScript

1.29 kB

3,505 3.7

Installations

npm install form-payload

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Min. Node Version

>=10

Node Version

20.14.0

NPM Version

10.7.0 Score

72.9

Supply Chain

99.4

Quality

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

87

Closed

0

Merged

87

Issues

Open

3

Total

58

Closed

55

Releases

v1.7.3

1.7.3

Updated on Jun 20, 2024

v1.7.2

1.7.2

Updated on Jan 12, 2024

v1.7.1

1.7.1

Updated on Dec 18, 2023

v1.7.0

1.7.0

Updated on Dec 16, 2023

v1.6.0

1.6.0

Updated on Dec 12, 2023

v1.5.0

1.5.0

Updated on Dec 11, 2023

View All 13 releases

Languages

JavaScript

JavaScript (100%)

Developer

what1s1ove

Download Statistics

Total Downloads

3,505

Last Day

Last Week

Last Month

Last Year

907

GitHub Statistics

MIT License

9 Stars

200 Commits

1 Watchers

12 Branches

2 Contributors

Updated on Jun 20, 2024

Bundle Size

2.66 kB

Minified

1.29 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

1.7.3

Package Id

form-payload@1.7.3

Unpacked Size

71.98 kB

Size

14.56 kB

File Count

121

NPM Version

10.7.0

Node Version

20.14.0

Published on

Jun 20, 2024

Total Downloads

Cumulative downloads

Total Downloads

3,505

Last Day

Compared to previous day

Last Week

2,200%

Compared to previous week

Last Month

-42.1%

Compared to previous month

Last Year

-40.6%

907

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

form-payload

Gets proper form payload – via form.elements.

Install

npm install form-payload

Demo

The library works perfectly with any framework. Just use a valid HTMLFormElement and form elements. If you want to add validation or any other functionality, create wrappers on top of the exported functions from the form-payload library.

Usage

1<form name="resume">
2  <label>CV: <input type="file" name="resume"></label>
3</form>
4
5<form name="mailing">
6  <label>Email: <input type="email" name="mail" value="e@mail.com"></label>
7</form>
8
9<form name="general">
10  <label>Name: <input type="text" name="name" value="John"></label>
11  <label>DOB: <input type="date" name="dob" value="2021-03-27"></label>
12  <button type="submit">Submit</button>
13</form>
14
15<script>
16  import { getFormPayload, getFormControlPayload } from 'form-payload';
17
18  const {
19    resume: resumeFormNode,
20    mailing: mailingFormNode,
21    general: generalFormNode,
22  } = document.forms;
23
24  resumeFormNode.addEventListener('change', (evt) => {
25    // ❌ bad (hard to read, magic numbers, bulky, outdated approach)
26    const file = evt.target.files?.[0] || null;
27
28    // 🟡 better (modern, clear, but repetitive approach – violates DRY)
29    const [file = null] = env.target.files ?? [];
30
31    // ✅ ideal
32    const file = getFormControlPayload(evt.target);
33    // => File or null
34  });
35
36  mailingFormNode.addEventListener('input', (evt) => {
37    const formControlPayload = getFormControlPayload(evt.target);
38    // => 'e@mail.com'
39  });
40
41  generalFormNode.addEventListener('submit', (evt) => {
42    evt.preventDefault();
43
44    const formPayload = getFormPayload(generalFormNode);
45    // => { name: 'John', dob: 'Sat Mar 27 2021 02:00:00 GMT+0200' }
46  });
47</script>

Value Correspondence Table

HTMLElement	Attributes	Included	Return Value
HTMLInputElement	`type="text"`	✅	`string`
HTMLInputElement	`type="password"`	✅	`string`
HTMLInputElement	`type="search"`	✅	`string`
HTMLInputElement	`type="url"`	✅	`string`
HTMLInputElement	`type="tel"`	✅	`string`
HTMLInputElement	`type="color"`	✅	`string`
HTMLInputElement	`type="radio"`	✅	`string`
HTMLInputElement	`type="hidden"`	✅	`string`
HTMLInputElement	`type="email"`	✅	`string`
HTMLInputElement	`type="email"` and `multiple`	✅	`Array<string>`
HTMLInputElement	`type="number"`	✅	`number`
HTMLInputElement	`type="range"`	✅	`number`
HTMLInputElement	`type="checkbox"`	✅	`boolean`
HTMLInputElement	`type="checkbox"` and with `[]` in `name`	✅	`Array<string>` (See advanced usage)
HTMLInputElement	`type="date"`	✅	`Date`
HTMLInputElement	`type="time"`	✅	`Date`
HTMLInputElement	`type="month"`	✅	`Date`
HTMLInputElement	`type="week"`	✅	`Date`
HTMLInputElement	`type="datetime-local"`	✅	`Date`
HTMLInputElement	`type="file"`	✅	`File` or `null`
HTMLInputElement	`type="file"` and `multiple`	✅	`Array<File>`
HTMLInputElement	`type="button"` or `type="submit"` or `type="reset"` or `type="image"`	❌	–
HTMLTextAreaElement	–	✅	`string`
HTMLSelectElement	–	✅	`string`
HTMLSelectElement	`multiple`	✅	`Array<string>`
HTMLOutputElement	–	✅	`string`
HTMLFieldsetElement	–	✅	`Object<name: string, value: unknown>` (See advanced usage)
HTMLFieldsetElement	with `[]` in `name`	✅	`Array<Object<name: string, value: unknown>>` (See advanced usage)
HTMLButtonElement	–	❌	–
HTMLObjectElement	–	❌	–

Advanced Usage

HTMLInputElement with type="checkbox" as array

getFormPayload returns an array of values for checked elements when using <input> with type="checkbox" and the [] symbol at the end of the name attribute of the <input> element itself.

1<form name="shop">
2  <label>Shop name: <input name="name" type="text" value="Shop #1"></label>
3  <label>Apple <input name="fruits[]" type="checkbox" value="apple" checked></label>
4  <label>Orange <input name="fruits[]" type="checkbox" value="orange"></label>
5  <label>Banana <input name="fruits[]" type="checkbox" value="banana" checked></label>
6  <button type="submit">Submit</button>
7</form>
8
9<script>
10  import { getFormPayload } from 'form-payload';
11
12  const { shop: shopFormNode } = document.forms;
13
14  shopFormNode.addEventListener('submit', (evt) => {
15    evt.preventDefault();
16
17    const formPayload = getFormPayload(shopFormNode);
18    // =>
19    // {
20    //   name: 'Shop #1',
21    //   fruits: ['apple', 'banana'],
22    // }
23  })
24</script>

HTMLFieldsetElement as object

getFormPayload/getFormControlPayload returns a nested objects when using the <fieldset> element. The key name will be based on the name attribute of the <fieldset> element itself. Nesting of <fieldset> elements within each other can be infinite. getFormPayload/getFormControlPayload collects all values recursively.

1<form name="company">
2  <label>Company name: <input name="name" type="text" value="FreshHarvest Hub"></label>
3  <fieldset name="shop">
4    <label>Shop name: <input name="name" type="text" value="Shop #1"></label>
5    <label>Open: <input name="isOpen" type="checkbox" checked></label>
6  </fieldset>
7  <button type="submit">Submit</button>
8</form>
9
10<script>
11  import { getFormPayload } from 'form-payload';
12
13  const { company: companyFormNode } = document.forms;
14
15  companyFormNode.addEventListener('submit', (evt) => {
16    evt.preventDefault();
17
18    const formPayload = getFormPayload(companyFormNode);
19    // =>
20    // {
21    //   name: 'FreshHarvest Hub',
22    //   shop: {
23    //     name: 'Shop #1',
24    //     isOpen: true,
25    //   },
26    // }
27  })
28</script>

HTMLFieldsetElement as array

getFormPayload/getFormControlPayload returns an array of objects when using the <fieldset> element and the [] symbol at the end of the name attribute of the <fieldset> elements. The functionality of recursively collecting values from nested <fieldset> elements is preserved.

1<form name="company">
2  <label>Company name: <input name="name" type="text" value="FreshHarvest Hub"></label>
3  <fieldset name="shops[]">
4    <label>Shop name: <input name="name" type="text" value="Shop #1"></label>
5    <label>Open: <input name="isOpen" type="checkbox" checked></label>
6  </fieldset>
7  <fieldset name="shops[]">
8    <label>Shop name: <input name="name" type="text" value="Shop #2"></label>
9    <label>Open: <input name="isOpen" type="checkbox"></label>
10  </fieldset>
11  <button type="submit">Submit</button>
12</form>
13
14<script>
15  import { getFormPayload } from 'form-payload';
16
17  const { company: companyFormNode } = document.forms;
18
19  companyFormNode.addEventListener('submit', (evt) => {
20    evt.preventDefault();
21
22    const formPayload = getFormPayload(companyFormNode);
23    // =>
24    // {
25    //   name: 'FreshHarvest Hub',
26    //   shops: [
27    //     {
28    //       name: 'Shop #1',
29    //       isOpen: true,
30    //     },
31    //     {
32    //       name: 'Shop #2',
33    //       isOpen: false,
34    //     },
35    //   ],
36    // }
37  })
38</script>

Inspired by FormData and Web-platform in general ♡.

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/cd.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:76: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:98: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:101: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:107: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:124: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:127: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:133: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/cd.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:58: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci-pr.yml:81: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci-pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:74: update your workflow using https://app.stepsecurity.io/secureworkflow/what1s1ove/form-payload/ci.yml/main?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/cd.yml:61
Warn: npmCommand not pinned by hash: .github/workflows/ci-pr.yml:45
Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:37
Info: 0 out of 29 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 3 third-party GitHubAction dependencies pinned
Info: 0 out of 3 npmCommand dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

3.7

/10

Last Scanned on 2025-05-26

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to form-payload

Other packages similar to form-payload

form-payload

Installations

Developer Guide

Yes

ESM

>=10

20.14.0

10.7.0

Score

Pull Requests

0

87

0

87

Issues

3

58

55

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

2.66 kB

1.29 kB

Maintainers

Package Meta Information

Total Downloads

3,505

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

form-payload

Install

Demo

Usage

Value Correspondence Table

Advanced Usage

HTMLInputElement with type="checkbox" as array

HTMLFieldsetElement as object

HTMLFieldsetElement as array

10

10

10

10

5

0

0

0

0

0

0

0

0

3.7

/10