npmpackage.info

form-payload

Gets proper form payload – via form.elements.

1.7.3

MIT

JavaScript

71.98 kB

3,247 3.8

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

77.8

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

Published on 20 Jun 2024

v1.7.2

1.7.2

Published on 12 Jan 2024

v1.7.1

1.7.1

Published on 18 Dec 2023

v1.7.0

1.7.0

Published on 16 Dec 2023

v1.6.0

1.6.0

Published on 12 Dec 2023

v1.5.0

1.5.0

Published on 11 Dec 2023

View all 13 releases

Contributors

Unable to fetch Contributors

View all 2 contributors

Languages

JavaScript

JavaScript (100%)

Developer

what1s1ove

Download Statistics

Total Downloads

3,247

Last Day

Last Week

Last Month

Last Year

1,180

GitHub Statistics

9 Stars

200 Commits

1 Watching

12 Branches

2 Contributors

Maintainers

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

Publised On

20 Jun 2024

Total Downloads

Cumulative downloads

Total Downloads

3,247

Last day

Compared to previous day

Last week

100%

Compared to previous week

Last month

60%

Compared to previous month

Last year

6.4%

1,180

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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 ♡.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

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

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

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/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/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-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.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: 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: 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

SAST

Determines if the project uses static code analysis.

Score

3.8

/10

Last Scanned on 2024-12-16

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

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

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

3,247

Daily Downloads

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

6

0

0

0

0

0

0

0

0

3.8

/10