Populate html form elements with data and return updated object

npm install former
1 downloads in the last day
2 downloads in the last week
29 downloads in the last month


browser support

Populate html form elements with data and return updated object when action button clicked.

Great for use in conjunction with JSON Context.



<div id='form'>

    <strong>Name:</strong> <br />
    <input name='name' type='text' />

    <strong>Gender:</strong> <br />
    <input name='gender' value='male' type='radio' /> Male <br />
    <input name='gender' value='female' type='radio' /> Female

    <strong>Favorite Color:</strong <br />
    <select name='favoriteColor'>
      <option value='red'>Red</option>
      <option value='yellow'>Blue</option>
      <option value='green'>Green</option>

    <strong>Enabled hard core mode</strong>
    <input name='options.hardCore' type='checkbox' />

    <button data-action='save'>Save</button> or
    <a href='#' data-action='cancel'>Cancel</div>
var form = require('former')

var element = document.getElementById('form')

var originalObject = {
  name: 'Betty',
  favoriteColor: 'green',
  gender: 'female',
  options: {
    hardCore: false,
    otherOption: true

form(element, originalObject, function(action, updatedObject){

  // callback triggered when an element with data-action attribute is clicked

  // originalObject remains unchanged. 
  // updatedObject contains changes and any other original 
  //    fields even if they aren't in the form

  if (action == 'save'){

npm loves you