How to serialize as an array of objects from multiple fields in jQuery?

Question

Hi,

I'm using jQuery to dynamically add new divs containing a few fields. I'm adding new tunes in this example of output:

<div id="uploadedTunes">
   <div class="tune">
     Title:<input type="text" name="Title">
     Length:<input type="text" name="Length"> 
   </div>
   <div class="tune">
     Title:<input type="text" name="Title">
     Length:<input type="text" name="Length"> 
   </div>
</div>

Is there a way to serialize only the fields in the div uploadedTunes (and not the whole form) ? And how do I serialize this so I have an array like this:

uploadedTunes{ tune { Title="highway to hell", Length="03:01" } }

Thank you for your help or clues!

Answer 1

Use serializeArray() on #uploadedTunes.

For example:

  jQuery.ajax({
    data : jQuery.param(jQuery(this).serializeArray()),
    dataType : 'script', 
    type:'post', 
    url:'/path/to/somewhere'
  }); 

I'm not sure if it works on something else than a form.

Answer 2

DEMO: http://jsbin.com/aneme/4/edit

include the jquery json lib

http://jquery-json.googlecode.com/files/jquery.json-1.3.min.js

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};


$(function() {  
  //define the array
  var tune = []; 
  //start looping
  $('#uploadedTunes .tune').each(function(i , e) { 
 //automatically add to each pair of tune elements an equal class name
   $(this).children().attr('class','tune_'+i);  
  //create and convert the array to JSON
  tune.push( $.toJSON( $('.tune_'+i).serializeObject() ) );
  });
  //join all tunes into one comma separated sting
  var uploadedTunes = tune.join(",");
  alert( uploadedTunes );
});

NOTE: Most people think that serializeArray() work only with FORM, this is not exactly true, it can work also without form by giving to each element you want serialize the same class! then serialize this class instead of form!