Convert a HTML form to a JS literal (multidimensional) object.
JavaScript HTML TypeScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist * BREAKING CHANGE: Single checkboxes now return string not array Apr 6, 2018
lib * BREAKING CHANGE: Single checkboxes now return string not array Apr 6, 2018
src * BREAKING CHANGE: Single checkboxes now return string not array Apr 6, 2018
test * BREAKING CHANGE: Single checkboxes now return string not array Apr 6, 2018
.codeclimate.yml Update .codeclimate.yml Aug 6, 2016
.editorconfig Migrating to TypeScript and a slightly different packaging process. Apr 6, 2018
.gitignore Migrating to TypeScript and a slightly different packaging process. Apr 6, 2018
.jscs.json Moved the build from Grunt to Gulp. Aug 5, 2016
.jshintrc Moved the build from Grunt to Gulp. Aug 5, 2016
.travis.yml Migrating to TypeScript and a slightly different packaging process. Apr 6, 2018
LICENSE.txt The jslint settings. Good for grunt and Sublime Editor Jul 14, 2014
README.md Formatting the result of the script. Apr 6, 2018
browserstack.json Added timeout to be safe. Oct 17, 2014
composer.json Update composer.json Jun 23, 2015
gulpfile.js Migrating to TypeScript and a slightly different packaging process. Apr 6, 2018
karma.acceptance.conf.js * BREAKING CHANGE: Single checkboxes now return string not array Apr 6, 2018
karma.unit.conf.js Migrating to TypeScript and a slightly different packaging process. Apr 6, 2018
package.json * BREAKING CHANGE: Single checkboxes now return string not array Apr 6, 2018
tsconfig.json Migrating to TypeScript and a slightly different packaging process. Apr 6, 2018
wallaby.js Moved the build from Grunt to Gulp. Aug 5, 2016

README.md

formToObject.js

Build Status NPM package NPM downloads Dependency Status

Convert HTML forms with all their fields and values to multi-dimensional JavaScript objects

Install

Node.js

  • npm install form_to_object

Browser

<!-- Include minified script (~2kb) -->
<script src="dist/formToObject.min.js"></script>

Usage

Using the DOM node id.

formToObject('myFormId');

Using the actual DOM Node reference.

formToObject(document.getElementById('myFormId'));

Result

{
  saveSettings: 'Save',
  name: 'Serban',
  race: 'orc',
  settings: {
     input: 'keyboard',
     video: {
        resolution: '1024x768',
        vsync: 'on'
     }
  }
}

XHR - sending form data

$.ajax({
  'url': '/app/settings/save/',
  'type': 'post',
  'data': formToObject('saveSettingsForm'),
  'success': function(r){}
});
Browser support

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

Screenshot