Convert a HTML form to a JS literal and multidimensional object.
MIT License
Convert HTML forms with all their fields and values to multidimensional JavaScript objects
As a npm package:
npm install form_to_object
import formToObject from 'form_to_object';
// or
const formToObject = require('form_to_object');
As a JS script:
<!-- Include minified script (~6kb) -->
<script src="build/formToObject.js"></script>
<!-- jsdelivr (CDN) -->
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/build/bundle/formToObject.min.js
"></script>
formToObject('myFormId');
formToObject(document.getElementById('myFormId'));
Resulted value:
{
"saveSettings": "Save",
"name": "Serban",
"race": "orc",
"settings": {
"input": "keyboard",
"video": {
"resolution": "1024x768",
"vsync": "on"
}
}
}
Good to know:
<form>
fields are found, but they lack of name
attribute property, the result will be {}
(empty object).<form>
contains only disabled
fields, the result will be {}
(empty object). If you force includeDisabledFields
then key:value pairs will be returned.<form>
will throw an Error.Option name | Default | Description |
---|---|---|
includeEmptyValuedElements |
boolean (default false ) |
Return field names as keys with empty value "" instead of just ignoring them. |
w3cSuccessfulControlsOnly |
boolean (default false ) |
TBA, WIP |
selectNameWithEmptyBracketsReturnsArray |
boolean (default true ) |
<select> field names like name="select[]" always return an array [a,b] instead or array of arrays [0: [a,b]] . |
checkBoxNameWithEmptyBracketsReturnsArray |
boolean (default true ) |
<input> checkboxes with field names like name=checkbox[] always return an array [a,b] instead or array of arrays [0: [a,b]] . |
IE 8, Firefox 3.5, Chrome, Safari, Opera 10, every mobile browser.