Serializing an array in jQuery
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;
});
I find a great function to do that from another question https://stackoverflow.com/a/31751351/4110122
This function return array with key value pairs
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
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;
};
To use this just call:
var Form_Data = $('form').serializeObject();
console.log(Form_Data);
See the docs for $.param
:
If the object passed is in an Array, it must be an array of objects in the format returned by .serializeArray()
[{name:"first",value:"Rick"},
{name:"last",value:"Astley"},
{name:"job",value:"Rock Star"}]
That means you need to generate your array in the same way:
$('.images_set_image input:checked').each(function(i){
images.push({ name: i, value: $(this).val() });
});