Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Populate html form elements with data and return updated object
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
test
.gitignore
README.md
index.js
package.json

README.md

former

browser support

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

Great for use in conjunction with JSON Context.

NPM

Example

<div id='form'>

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

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

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

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

  <div>
    <button data-action='save'>Save</button> or
    <a href='#' data-action='cancel'>Cancel</div>
  </div>
</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'){
    datasource.pushChange(updatedObject)
  }

})
Something went wrong with that request. Please try again.