How to seralize values of checkboxes to pass via AJAX?

Question

I have a set of checkboxes which all have the same name called 'Department'. Whenever a user checks one or more of these Department checkboxes I want the values to be seralized and sent via AJAX so that it can retrieve more data based on the selected values.

So far I have done this:

$('#user-Departments input[name="Department"]').change(function () {
    var selected = $('#user-Departments input[name="Department"]').serialize();
    console.log(selected);
});

So if any of the Department checkboxes change in the div with id of user-Departments, then I'm asking JQuery to seralize the values. The value is contained in the ID attribute of each checkbox. But my console is showing this:

Department=4&Department=9

How do I get just the values 4 and 9 into a comma-delimited string e.g. "4,9" so that I can pass it as a list to my web server (Coldfusion)?

ADDED JSFIDDLE: http://jsfiddle.net/mjcJ4/

Your querystring looks fine. It should be bound to an array by whatever server side language you're using. Also, you may need to add the `:checked` selector to the serialized elements, otherwise it will always return all available checkboxes, selected or not. — Rory McCrossan, Apr 22 '14 at 14:54
can you provide your issue example in http://jsfiddle.net/ or http://jsbin.com/ ? — Epsil0neR, Apr 22 '14 at 14:55

score 2 · Answer 1 · answered Apr 22 '14 at 15:17

http://jsfiddle.net/3K6mL/

 $(document).ready(function() {

    $("input[name='department']").change(function() {

        var departmentIds = [];

        var selectedDepartments = $("input[name='department']:checked").each(function(){
            departmentIds.push($(this).val());
        });

        //post the values to the url 
        $.post("/your/url/", JSON.stringify(departmentIds));

    });

 });

I've added the values to a collection and then converted the values to json for a post. Notice how i'm only getting the values that are "Checked" (when one of the checkboxes are ticked or unticked).

martincarlin87 · Accepted Answer · 2014-04-22T15:24:39.070

2

http://jsfiddle.net/mjcJ4/7/

$('#user-Departments input[name="Department"]').change(function () {
    var selected = [];

    $('#user-Departments input:checked[name="Department"]').each(function(index) {
        selected.push($(this).val());
    });

    console.log(selected.toString());
});

edited Apr 22 '14 at 15:24

answered Apr 22 '14 at 15:18

martincarlin87

10,848
24
98
145

this is very neat and clean I like it! – volume one Apr 22 '14 at 15:24

score 1 · Answer 3 · answered Apr 22 '14 at 15:18

1

Using .map() will be more efficient i guess

$('#user-Departments input[name="Department"]').change(function () {
  var selected = $('#user-Departments input[name="Department"]:checked').map(function() { 
    return this.value; 
  }).get().join(',');
  console.log(selected);
});

UPDATED FIDDLE

answered Apr 22 '14 at 15:18

Batu.Khan

3,060
2
19
26

is map() more efficient than the push() solutions given by others? – volume one Apr 22 '14 at 15:22
No. I meant it'll be more efficient then trying to deal with `serialize()`. You can check [HERE](http://jsperf.com/javascript-map-vs-jquery-map-vs-jquery-each) for a test on map vs each and [HERE](http://stackoverflow.com/questions/749084/jquery-map-vs-each) for additional info – Batu.Khan Apr 22 '14 at 15:30

How to seralize values of checkboxes to pass via AJAX?

3 Answers3