Convert Form Elements to JavaScript Object Literals with jQuery formParams Plugin

by Justin Meyer

Convert Form Elements to JavaScript Object Literals with jQuery formParams Plugin

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.

posted in 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.

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!

Getting Started with Cordova

Brian Moschelposted in Development on March 26, 2015 by Brian MoschelAt Bitovi, we’re big fans of building applications with web technologies and using build tools to target other platforms like iOS, Android, and desktop. This article will provide a quick guide to getting up and running quickly with Cordova.

Web Application Theory

Justin Meyerposted in Development on June 27, 2014 by Justin MeyerUnderstand the technology and architecture choices Bitovi make and why we make them. What Bitovi does and why.

Contact Us
(312) 620-0386 | contact@bitovi.com
 or cancel