npmpackage.info

Gathering detailed insights and metrics for form-payload

Other packages similar to form-payload

typeform-payload-helpers

0.1.1

Helper functions to crawl form payload responses data from Typeform

@payloadcms/plugin-form-builder

3.4.0

Form builder plugin for Payload CMS

parse-multipart-data

1.5.0

A javascript/nodejs multipart/form-data parser which operates on raw data.

form-data

4.0.1

A library to create readable "multipart/form-data" streams. Can be used to submit forms and file uploads to other web applications.

Gathering detailed insights and metrics for form-payload

form-payload

Gets proper form payload – via form.elements.

1.7.3

MIT

JavaScript

3,244

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

82.7

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

Developer

what1s1ove

Statistics

9 Stars

200 Commits

1 Watching

12 Branches

2 Contributors

Updated on 20 Jun 2024

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

3,244

Last day

Compared to previous day

Last week

425%

Compared to previous week

Last month

-42.6%

Compared to previous month

Last year

418.5%

1,929

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

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

/10

Last Scanned on 2024-11-25

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

:host{display:inline-block;direction:ltr;white-space:nowrap;line-height:var(--number-flow-char-height, 1em) !important}span{display:inline-block}:host([data-will-change]) span{will-change:transform}.number,.digit{padding:calc(var(--number-flow-mask-height, 0.25em) / 2) 0}.symbol{white-space:pre}00

:host{display:inline-block;direction:ltr;white-space:nowrap;line-height:var(--number-flow-char-height, 1em) !important}span{display:inline-block}:host([data-will-change]) span{will-change:transform}.number,.digit{padding:calc(var(--number-flow-mask-height, 0.25em) / 2) 0}.symbol{white-space:pre}00

Issues

:host{display:inline-block;direction:ltr;white-space:nowrap;line-height:var(--number-flow-char-height, 1em) !important}span{display:inline-block}:host([data-will-change]) span{will-change:transform}.number,.digit{padding:calc(var(--number-flow-mask-height, 0.25em) / 2) 0}.symbol{white-space:pre}33

Releases

Developer

Statistics

Languages

Total Downloads

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

0

0

3