former

    0.5.0 • Public • Published

    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)
      }
     
    })
     

    Install

    npm i former

    DownloadsWeekly Downloads

    4

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    11.3 kB

    Total Files

    4

    Last publish

    Collaborators

    • mmckegg
    • swikrit