form-parse

Takes a form element and transforms the input values into an object.

NOTE: this is the successor to form-serialize, but it drops component/duo in favor of mako. (uses npm for deps, like browserify)

Usage

<form id="my-form">
    <input type="hidden" name="id" value="123456">
    <input type="text" name="username" value="dominicbarnes">
</form>

var parse = require('form-parse');
var form = document.querySelector('#my-form');

parse(form);
// => { id: '123456', username: 'dominicbarnes' }

API

parse(form, [transformer])

Takes the given form element and collects the values of all of the submittable elements into a single JS object

Fields can be namespaced by using square bracket notation. For example:

<input type="hidden" name="id" value="1">
<input type="text" name="user[name]" value="dominic">
<input type="url" name="user[website]" value="http://dbarnes.info/">
<input type="checkbox" name="tags[]" value="a" checked>
<input type="checkbox" name="tags[]" value="b">
<input type="checkbox" name="tags[]" value="c" checked>

{
  id: "1",
  user: {
    name: "dominic",
    website: "http://dbarnes.info/"
  },
  tags: [ "a", "c" ]
}

See squares for documentation about how square-bracket notation is implemented here.

The transformer parameter (a Function) can be used to transform the field values during serialization. (eg: parse numbers, dates, etc) This function receives 3 arguments: the name of the field, the input's value and the element itself.

<input type="text" name="username" value="testuser">
<input type="number" name="number" value="1.23">
<input type="date" name="date" value="2014-06-25">
<input type="text" name="empty">

parse(form, function (name, value, element) {
  switch (name) {
  case "number": return parseFloat(value);
  case "date":   return el.valueAsDate;
  case "empty":  return null;
  default:       return value; // catch-all
  }
});

NOTE: if using transformer, you should always return something, because the return value will clobber whatever other value was retrieved.