form-payload 1.6.0
Install from the command line:
Learn more about npm packages
$ npm install @what1s1ove/form-payload@1.6.0
Install via package.json:
"@what1s1ove/form-payload": "1.6.0"
About this version
Gets proper form payload – via form.elements.
npm install form-payload
PS. The library works perfectly with any framework. Just use a valid HTMLFormElement. The same applies to validations and any other libraries. Just create your own wrappers on top of the functions exported by form-payload library.
<form name="general">
<label>
Name
<input type="text" name="name" value="John" />
</label>
<label>
Birthday
<input type="date" name="birthday" value="2021-03-27" />
</label>
<button type="submit">Submit</button>
</form>
<form name="mailing">
<label>
Mailing
<input type="email" name="mail" value="[email protected]" />
</label>
</form>
<script>
import { getFormPayload, getFormControlPayload } from 'form-payload';
const generalFormNode = document.querySelector('form[name="general"]');
const mailingFormNode = document.querySelector('form[name="mailing"]');
generalFormNode.addEventListener('submit', (evt) => {
evt.preventDefault();
const formPayload = getFormPayload(generalFormNode);
// => { name: 'John', birthday: 'Sat Mar 27 2021 02:00:00 GMT+0200' }
});
mailingFormNode.addEventListener('input', (evt) => {
const formControlPayload = getFormControlPayload(evt.target);
// => '[email protected]'
});
</script>| 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 [] in name (Ex. name="fruits[]") |
✅ | Array<string> |
| 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" |
❌ | – |
| HTMLInputElement | type="submit" |
❌ | – |
| HTMLInputElement | type="reset" |
❌ | – |
| HTMLInputElement | type="image" |
❌ | – |
| HTMLTextAreaElement | – | ✅ | string |
| HTMLSelectElement | – | ✅ | string |
| HTMLSelectElement | multiple |
✅ | Array<string> |
| HTMLOutputElement | – | ✅ | string |
| HTMLFieldsetElement | – | ✅ |
Object<name: string, value: unknown> (recursive values of nested elements) |
| HTMLFieldsetElement |
[] in name (Ex. name="shops[]") |
✅ |
Array<Object<name: string, value: unknown>> (recursive values of nested elements) |
| HTMLButtonElement | – | ❌ | – |
| HTMLObjectElement | – | ❌ | – |
