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!

Using CanJS 2.2 with StealJS and NPM

David Lueckeposted in Development, Open Source on April 23, 2015 by David LueckeCanJS can be used in many different module formats like AMD and CommonJS and package managers like Bower and NPM. In this post we will talk about using CanJS with the new StealJS and NPM.

Set Algebra with can-set

Justin Meyerposted in Development, Open Source on April 22, 2015 by Justin Meyercan-set is a client and server side JavaScript utility that makes set algebra easy. This article talks about the design goals of can-set and introduces a few cases where you might find it useful.

CanJS 2.2 Release

Justin Meyerposted in Development, Open Source, Uncategorized on April 5, 2015 by Justin MeyerCanJS 2.2 is out. It's awesome. This article covers the top 10 enhancements added since 2.1. Some of the improvements include Browserify and StealJS support, can-EVENT arguments, observable promises, and in-page automatically rendered templates. The article includes a lot of good JSBins to learn from too.

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