form_to_object

Convert a HTML form to an a JavaScript plain object (multi-dimensional).

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
form_to_object
8823.1.03 months ago10 years agoMinified + gzip package size for form_to_object in KB

Readme

form-to-object (formToObject.js)
Convert HTML forms with all their fields and values to multidimensional JavaScript objects
Workflow status Codecov branch Latest tag npm version npm downloads

Install

As a npm package: ```shell npm install formtoobject ``` ```js import formToObject from 'formtoobject'; // or const formToObject = require('formtoobject'); ``` As a JS script: ```html ```

Example

  • Using the DOM node id: formToObject('myFormId');
  • Using the actual DOM Node reference: formToObject(document.getElementById('myFormId'));
Resulted value: ```json { "saveSettings": "Save", "name": "Serban", "race": "orc", "settings": {
"input": "keyboard",
"video": {
"resolution": "1024x768",
"vsync": "on"
}
} } ``` Good to know:
  1. If <form> fields are found, but they lack of name attribute property, the result will be {} (empty object).
  1. If <form> contains only disabled fields, the result will be {} (empty object). If you force includeDisabledFields then key:value pairs will be returned.
  1. An empty <form> will throw an Error.
  1. In case of an error like non-existing form or invalid selector, an Error will be thrown.

Options

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

Browser support

IE 8, Firefox 3.5, Chrome, Safari, Opera 10, every mobile browser.

Example