Installations
npm install form-payload
Developer Guide
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
Releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (100%)
Developer
Download Statistics
Total Downloads
3,247
Last Day
1
Last Week
2
Last Month
24
Last Year
1,180
GitHub Statistics
9 Stars
200 Commits
1 Watching
12 Branches
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
Publised On
20 Jun 2024
Total Downloads
Cumulative downloads
Total Downloads
3,247
Last day
0%
1
Compared to previous day
Last week
100%
2
Compared to previous week
Last month
60%
24
Compared to previous month
Last year
6.4%
1,180
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
27
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
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.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/cd.yml:90
Reason
4 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/19 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/cd.yml:21
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/ci-pr.yml:75
- Warn: no topLevel permission defined: .github/workflows/cd.yml:1
- Warn: no topLevel permission defined: .github/workflows/ci-pr.yml:1
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
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
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 30 are checked with a SAST tool
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