Serializing an array in jQuery

Question

How to prepare an array of element for $.ajax submit?

Here images return ["val1","val2"], but after I use $.param(images) I get the following:

undefined=undefined&undefined=undefined

Here is my code:

$('#rem_images').click(function() {
    var images = new Array();
    $('.images_set_image input:checked').each(function(i) {
        images[i] = $(this).val();
    });
    alert($.param(images));

    return false;
}

Generally the idea is to check the images to delete on the page, then on a button click loop trough all images checked and serialize an array for submit over AJAX to the PHP script.

Answer 1

You're not passing an array in proper format to $.param. From the jQuery.param docs:

If the object passed is in an Array, it must be an array of objects in the format returned by .serializeArray().

The array should be an array of objects consisting of name/value pairs. You see undefined=undefined&undefined=undefined because "val1".name, "val1".value, "val2".name, and "val2".value, are all undefined. It should look something like this:

[{name: 'name1', value: 'val1'}, {name: 'name2', value: 'val2'}]

So you can construct the array like this (assuming your checkboxes have a name attribute):

$('#rem_images').click(function(){
    var images = [];
    $('.images_set_image input:checked').each(function(){
        var $this = $(this);
        images.push({name: $this.attr('name'), value: $this.val()});
    });
    alert($.param(images));
    return false;
});

Even slicker, though, is to use .map() (because functional programming is good stuff):

$('#rem_images').click(function(){
    var images = $('.images_set_image input:checked').map(function(){
        var $this = $(this);
        return {name: $this.attr('name'), value: $this.val()};
    }).get();
    alert($.param(images));
    return false;
});