How to send multiple checkbox values in single object through ajax

Question

I have a form with 4 different checkboxes with ids namely filter_AFFILIATION_1, filter_AFFILIATION_2 and so on till 4. I am trying to send the checked checkboxes values to the server dynamically by using an ajax call. Here is my code:

    $('input[type="checkbox"]').change(function(){   
    var ids = ['filter_AFFILIATION_1','filter_AFFILIATION_2','filter_AFFILIATION_3','filter_AFFILIATION_4'];    
    for(var i = 0; i < ids.length; i++){
      if(document.getElementById(ids[i]).checked === true){
      var data = {};
      data['request'+i] =  $('#'+ ids[i]).val();            
      console.log(data);
        }
    }

     $.ajax({
            type: 'POST', 
            url: Routing.generate('listingpage'),
            contentType: 'application/x-www-form-urlencoded',
            data: data,        
        success: function(result,status,xhr){
            console.log(result);
        }

If you look at

data['request'+i] =  $('#'+ ids[i]).val();            
      console.log(data);

part of the code, the output of console.log if I click

Only first checkbox:

{request0: "1"}
First and then second checkbox:

{request0: "1"}

{request1: "2"}
First and then second and then 3rd checkbox:

{request0: "1"}

{request1: "2"}

{request2: "3"}
First then second, then third and then uncheck second checkbox:

{request0: "1"}

{request2: "3"}

Now my problem is that I want to send the data as a single object rather than multiple objects such as if the user clicks first checkbox and then second the output of console.log(data) should be

 `{request0: "1", request1: "2"}`

I've tried a lot of different methods but nothing seem to work. Any ideas?

have you tried data.push() ???

N1gthm4r3
– N1gthm4r3

2017-08-25 11:45:55 +00:00
Commented Aug 25, 2017 at 11:45 — N1gthm4r3
– N1gthm4r3, Commented Aug 25, 2017 at 11:45

Terry · Accepted Answer · 2017-08-25 11:56:50Z

1

You are overwriting your data object. What you want is to declare the data object outside the for loop, and then add new key-value pairs to the pre-existing object within the loop:

$('input[type="checkbox"]').change(function() {
    var ids = ['filter_AFFILIATION_1', 'filter_AFFILIATION_2', 'filter_AFFILIATION_3', 'filter_AFFILIATION_4'];

    // Create object outside of for loop
    var data = {};

    // Iterate through ids array
    for (var i = 0; i < ids.length; i++) {

        if (document.getElementById(ids[i]).checked === true) {

            // Create new key in pre-existing data object and assign value
            data['request' + i] = $('#' + ids[i]).val();

        }
    }

    // Just logging, to check
    console.log(data);

    // Request
    $.ajax({
        type: 'POST',
        url: Routing.generate('listingpage'),
        contentType: 'application/x-www-form-urlencoded',
        data: data,
        success: function(result, status, xhr) {
            console.log(result);
        }
    });
});

edited Aug 25, 2017 at 11:56

answered Aug 25, 2017 at 11:48

Terry

66.7k16 gold badges107 silver badges127 bronze badges

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

1 Comment

Terry Over a year ago

@utkarsh2k2 No problem, glad my answer helped :)

Collectives™ on Stack Overflow

How to send multiple checkbox values in single object through ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related