Gathering detailed insights and metrics for @tech_query/formdata-submitter-polyfill
Gathering detailed insights and metrics for @tech_query/formdata-submitter-polyfill
Installations
npm install @tech_query/formdata-submitter-polyfillDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM, UMD
Node Version
20.16.0
NPM Version
10.8.1
Score
66.8
Supply Chain
99.2
Quality
75.9
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
1.0.3
Package Id
@tech_query/formdata-submitter-polyfill@1.0.3
Unpacked Size
16.52 kB
Size
4.37 kB
File Count
17
NPM Version
10.8.1
Node Version
20.16.0
Published on
Sep 09, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
4
FormData submitter polyfill
Support the submitter parameter to the FormData constructor in older browsers.
Usage
Installation
CDN
Polyfill CDN with auto detecting feature:
1<head> 2 <script src="https://polyfill.web-cell.dev/feature/FormDataSubmitter.js"></script> 3</head>
NPM
1npm install --save formdata-submitter-polyfill
Then import it early in your client entrypoint .js file, e.g.
1import "formdata-submitter-polyfill";
Initialization
Now you can reliably create FormData objects populated from both a form and a submitter. A common scenario for this is in form submission handlers, e.g.
1var myform = document.createElement("form"); 2myform.innerHTML = ` 3 <input name=foo value=FOO> 4 <button name=go value=GO>go!</button> 5 <input type=image> 6 <input name=bar value=BAR> 7`; 8myform.addEventListener("submit", (event) => { 9 event.preventDefault(); 10 const formData = new FormData(event.target, event.submitter); 11 // If the button is the submitter: 12 // ▸ FormData(3) { foo → "FOO", go → "GO", bar → "BAR" } 13 // If the image button is the submitter: 14 // ▸ FormData(4) { foo → "FOO", x → "0", y → "0", bar → "BAR" } 15 16 // ... do something with formData ... 17});
These FormData objects are equivalent to the form data sets constructed by equivalent native form submissions.
If you also need to polyfill the submitter property of the SubmitEvent, consider using the event-submitter-polyfill package alongside this one.
TypeScript
The latest TypeScript DOM types support the submitter parameter. If you are using older DOM types (e.g. the ones that shipped with your version of TypeScript), you can get the latest by running:
1npm install @typescript/lib-dom@npm:@types/web --save-dev
If for some reason you can't upgrade yet, in the meantime you can add a // @ts-expect-error comment to make TypeScript happy 🙈.
Additional Exports
If you want more control over how/when the polyfill is activated, you can use the exports provided by formdata-submitter-polyfill/impl. For example:
1import { 2 FormData, 3 polyfillFormDataIfNecessary, 4} from "formdata-submitter-polyfill/impl"; 5 6// this will replace window.FormData with the polyfill if necessary 7polyfillFormDataIfNecessary(FormData);
Lightweight mode
By default, the polyfill fully supports the form entry list construction algorithm, i.e. ensuring that image button and named button submitters are encoded in tree order. It accomplishes this by temporarily tweaking the form during submission to get the right entries.
While this performs well, you can get faster (but less compliant) behavior by doing:
1import "formdata-submitter-polyfill/lite";
This will instead create a submitter-less FormData object and then append submitter entries (as appropriate) to the end of the list, e.g.
1const formData = new FormData(event.target, event.submitter); 2// If the button is the submitter: 3// ▸ FormData(3) { foo → "FOO", bar → "BAR", go → "GO" } 4// If the image button is the submitter: 5// ▸ FormData(4) { foo → "FOO", bar → "BAR", x → "0", y → "0" }
Gotchas
-
If the entry order matters for consumers, this may lead to bugs (i.e. the order will differ from one created from a vanilla form submission).
-
Older versions of Safari will include
submitterentries twice, due to this bug.
The default polyfill mode does not have these issues.
No vulnerabilities found.
No security vulnerabilities found.