I have multiple checkbox input elements.

<input type="checkbox" name="userpages[]" id="1" value="1"/>
<input type="checkbox" name="userpages[]" id="2" value="2"/>
<input type="checkbox" name="userpages[]" id="3" value="3"/>
<input type="checkbox" name="userpages[]" id="4" value="4"/>

I want to pass the value of checked element to the php script via Ajax. I tried doing it this way -

var pages = $('input[name="userpages[]"]:checked');
    $.ajax({
    type: 'POST',
    url: 'post.php',
    data: {pages: pages},
    dataType: 'json',
    success: function(data) {
        if(data.status == 1) {
            alert('Successfully posted on your Facebook pages !');
        } else if(data.status == 0) {
            alert('Error !! Please try again.');
        } else {
            alert('Unknown Error. Reloading this page now...');
            location.reload();
         }
            }
    });

and retrieved the value in php script -

  foreach($_POST['pages'] as $page_id) {
    echo $page_id;
  }

But this didn't worked for me. I also tried getting the value of variable pages, when alerted it popped up 'object Object'. Any help would be appreciable. :)

I have multiple checkbox input elements.

<input type="checkbox" name="userpages[]" id="1" value="1"/>
<input type="checkbox" name="userpages[]" id="2" value="2"/>
<input type="checkbox" name="userpages[]" id="3" value="3"/>
<input type="checkbox" name="userpages[]" id="4" value="4"/>

I want to pass the value of checked element to the php script via Ajax. I tried doing it this way -

var pages = $('input[name="userpages[]"]:checked');
    $.ajax({
    type: 'POST',
    url: 'post.php',
    data: {pages: pages},
    dataType: 'json',
    success: function(data) {
        if(data.status == 1) {
            alert('Successfully posted on your Facebook pages !');
        } else if(data.status == 0) {
            alert('Error !! Please try again.');
        } else {
            alert('Unknown Error. Reloading this page now...');
            location.reload();
         }
            }
    });

and retrieved the value in php script -

  foreach($_POST['pages'] as $page_id) {
    echo $page_id;
  }

But this didn't worked for me. I also tried getting the value of variable pages, when alerted it popped up 'object Object'. Any help would be appreciable. :)

• javascript
• php
• jquery
• ajax

• 2 Debug using the console: console.log(/* variable */). Open the console in Chrome using F12. You get a lot more information about JS data, and you can also execute JS lines of code. – Hidde Commented Mar 2, 2014 at 12:19

2 Answers 2

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

The array is correct. However, it is an array consisting of jQuery DOM elements, not the values of the inputs.

To get the data in the form of index => value pairs in the array, to send it by AJAX, use something like the following:

var data = []

$('input[name="userpages[]"').each (function (index, element) {
    data[$(element).attr('id')] = $(element).val();
});
console.log(data);

Send the gathered data using the jQUery AJAX function.

A JSFiddle: http://jsfiddle/LMbxC/1/