Convert Form Elements to JavaScript Object Literals with jQuery formParams Plugin

Justin Meyer byJustin Meyer

Convert Form Elements to JavaScript Object Literals with jQuery formParams Plugin

Justin Meyer

posted in Open Source,Development on June 8, 2010 by Justin Meyer

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.


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


  • 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.


Form Params Demo


JavaScriptMVC's formParams documentation.


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]' />

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!


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 ) {
var recipe = $(this).formParams().recipe;
if( !recipe.title && recipe.instructions ) {
alert( 'provide a title and instructions' );
function(){ .... },


Create better web applications. We’ll help. Let’s work together.