Creating value pairs from serialized Array of form checkboxes

Question

I need to create a variable to use with in the ajax data property. The out put needs to look like this:

data: { brand: 1, brand: 4 }

I have a few checkboxes, depending on what the user clicks I would like the list to change.. currently I have this:

$('body').on('change','form[name=checkboxes] input',function(){

var result = [];
$.each( $('form[name=checkboxes]').serializeArray(), function() {
    result.push({
        name: this.name,
        value: this.value
    });
});

console.log(result);

$.ajax({
    type: "POST",
    url: "/echo/html/",
    data: { brand: 1, brand: 4 }
}).done(function( data ) {

});

});

But result outputs objects.

image of the result I created

Does anyone have any suggestions, am I on the right track?

I've created a JS fiddle to help http://jsfiddle.net/samstimpson/hzy9jxve/

Edit

My goal is to build this "data: { brand: 1, brand: 4 }" dynamically. If the user clicks a load of checkboxes I ultimately want to pass a list in to the ajax data value.. what Ive done above may not be correct, Im looking for a way of doing this.

You can't have an object that contains the same key name; {brand: 1, brand: 4} won't work. — Steven Lambert
– Steven Lambert, Commented Nov 26, 2014 at 22:45

ymz · Accepted Answer · 2014-11-26 22:48:27Z

2

you required json is illegal because the brand field is repeated twice(??)

i created a fix in jsFiddle for you: http://jsfiddle.net/ymzrocks/hzy9jxve/1/

var result = {}, i = 1;
$.each( $('form[name=checkboxes]').serializeArray(), function() 
{
    result[this.name + i] =  this.value ; i++;
});

it basically turns the brand fields to brand1, brand2, ... etc

i really think that you should use an array or rephrased your question

answered Nov 26, 2014 at 22:48

ymz

6,9641 gold badge26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Iamsamstimpson Over a year ago

ok, thats cool. My goal is to pass the checkbox name and value through to a page via a POST.

ymz Over a year ago

great :) i still think that a single array with all the values selected (per group) will be better... { brand : [2, 4, 1], other_brand: [2, 3] }

Iamsamstimpson Over a year ago

If you think its better I'll look in to it! One thing though would that format be valid passing in tot he ajax data field?

CodeX · Accepted Answer · 2014-11-26 22:44:19Z

1

I imagine you would use JSON.stringify function

http://msdn.microsoft.com/en-us/library/ie/cc836459(v=vs.94).aspx

the following post might also be a good read

http://geekswithblogs.net/rgupta/archive/2014/06/25/combining-jquery-form-serialize-and-json.stringify-when-doing-ajax-post.aspx

answered Nov 26, 2014 at 22:44

CodeX

716 bronze badges

Collectives™ on Stack Overflow

Creating value pairs from serialized Array of form checkboxes

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related