Convert Form Elements to JavaScript Object Literals with jQuery formParams Plugin

Tuesday 08 June, 2010 by justinbmeyer

Want to quickly extract form data to a more usable format? Of course you do! We use JavaScriptMVC's formParams plugin constantly to turn form data into much easier to manipulate JavaScript Objects.  We're releasing formParams standalone so everyone can save a little time on this extremely common task.

Download

jquery.formparams.js (minified 1kb) [works with all versions of jQuery]

Features

  • Converts form data into object literals like: {foo: 'bar'}
  • Creates nested objects with input names like: 'foo[bar]'
  • Can convert values that look like numbers and booleans to Numbers and Booleans.
  • Works without a form element.

Demo

Form Params Demo

Documentation

JavaScriptMVC's formParams documentation.

Use

Just call formParams on any jQuery wrapped element (form or not):

$('#myform').formParams()  //-> Object

#myform html might look like:

<form id='myform'>
  <input type='text' name='donate' />
  
  <input type='text' name='credit[name][first]' />
  <input type='text' name='credit[name][last]' />

  <input type='text' name='credit[number]' />
  <input type='text' name='credit[expire]' />
  <input type='text' name='credit[security]' />
</form>

The result of formParams might look like:

//$('#myform').formParams()  -> 
{
  donate: 50.55,
  credit : {
    name : {
      first: "Justin",
      last: "Meyer"
    },
    number: "0000-2342-4654-5555"
    expire: "5/4/2011",
    security: 555
  }
}

Sweet huh? You can turn off the Number/Boolean conversion (leaving all values as strings) by calling form params with false:

$('#myform').formParams(false)  //-> Object

Oh, and one other cool thing ... if you have a bunch of checkboxes with the same name like:

<input type='checkbox' checked='checked' 
       name='items' value='model' />
<input type='checkbox' checked='checked'
       name='items' value='view' />
<input type='checkbox' 
       name='items' value='controller'/>

formParams will put the values of the checked checkboxes in an array like:

{items: ['model','view']}

How handy is that!

Conclusions

formParams is quite handy. Because it already depends on an existing form, it's very useful for adding unobtrusive AJAX behavior to forms. We'll often use it to validate a JavaScript object literal before converting the literal to JSON with jquery-json before sending it to a JSON-REST service. That typically looks like:

$('form#recipe').submit( function( ev ) {
  ev.preventDefault();
  var recipe = $(this).formParams().recipe;
  if( !recipe.title && recipe.instructions ) {
    alert( 'provide a title and instructions' );
  }else{
    $.post("/recipes.json",
           $.toJSON(recipe),
           function(){ .... },
           'json'
  }
})

Enjoy!

Subscribe to:

Related Content

Copyright ©2007-2010 Jupiter IT.