HTML code:
<div id="test"> <input name="text1" value="txt-one" /> <input type="checkbox" name="top[child][]" value="1" checked="checked" /> <input type="checkbox" name="top[child][]" value="2" checked="checked" /> <input type="checkbox" name="top[child][]" value="3" checked="checked" /> <select name="another[select]"> <option value="opt"></option> </select></div>$( '#test' ).serializeObject();Returns{ text1: "txt-one", top: { child: [ "1", "2", "3" ] }, another: { select: "opt" }}
JS script:
/* * .serializeObject (c) Dan Heberden* danheberden.com* * Gives you a pretty object for your form elements*/(function($){ $.fn.serializeObject = function() { if ( !this.length ) { return false; } var $el = this, data = {}, lookup = data; //current reference of data $el.find(':input[type!="checkbox"][type!="radio"], input:checked').each(function() { // data[a][b] becomes [ data, a, b ] var named = this.name.replace(/\[([^\]]+)?\]/g, ',$1').split(','), cap = named.length - 1, i = 0; for ( ; i < cap; i++ ) { // move down the tree - create objects or array if necessary lookup = lookup[ named[i] ] = lookup[ named[i] ] || ( named[i+1] == "" ? [] : {} ); } // at the end, psuh or assign the value if ( lookup.length != undefined ) { lookup.push( $(this).val() ); }else { lookup[ named[ cap ] ] = $(this).val(); } // assign the reference back to root lookup = data; }); return data; };})(jQuery);