Pass Checkbox Array into AJAX call

Question

I'm trying to pass a checkbox array into an AJAX call for a search form im working on:

HTML:

<form id="searchForm">
    <input type="checkbox" class="typesSearch" name="types[]" value="Fundraiser" checked />&nbsp;Fundraiser<br>
    <input type="checkbox" class="typesSearch" name="types[]" value="Conference" checked />&nbsp;Conference<br>
</form>

JavaScript:

var types = [];

var eventTypes = document.forms['searchForm'].elements[ 'types[]' ];

for (var i=0, len=eventTypes.length; i<len; i++) {
    if (eventTypes[i].checked ) {
        types.push($(eventTypes[i]).val());
    }
}

$.ajax({
    url: "https://www.example.com/search.php",
    method: "post",
    data:{
        eventname: eventname,
        types: types
    },
    dataType:"text",
    success:function(data)
    {
        $('#eventsList').html(data);
        $('#eventsList').slick($opts);
    }
});

PHP:

$event_types = $_POST['types'];

The types array is fine on the javascript side, its when it hits the PHP side that $_POST['types'] is read as being empty.

Why is it that $_POST['types'] is read as empty? Is there something in the AJAX call where I need to define that I'm passing in an array instead of a string?

Are you using jQuery 1.9.0 or newer? From the documentation: You should use "type" if you're using versions of jQuery prior to 1.9.0.. The method argument was added in version 1.9.0. api.jquery.com/jquery.ajax. If an older version of jQuery is being used then the type array would be available via $_GET in your PHP script since that's the default HTTP method used. — Jasper
– Jasper, Commented Jan 10, 2019 at 18:14

DiabloSteve · Accepted Answer · 2019-01-10 18:13:32Z

1

Try to use the following at "data":

$.ajax({
    url: "https://www.example.com/search.php",
    method: "POST",
    data:{
        eventname: eventname,
        types: JSON.stringify(types)
    },
    dataType:"text",
    success:function(data)
    {
        $('#eventsList').html(data);
        $('#eventsList').slick($opts);
    }
});

With this, the types is a string and you need to parse it to array object on PHP side.

On server side, you can use the following code to get the array. The $item[0]

$event_types = $_POST['types'];
$item = (json_decode(stripslashes($event_types)));

edited Jan 10, 2019 at 18:13

answered Jan 10, 2019 at 18:06

DiabloSteve

4212 silver badges13 bronze badges

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

Comments

rollingthedice · Accepted Answer · 2019-01-10 18:06:48Z

1

You need to serialize your array in order to receive it in $_POST, so your ajax should look like:

$.ajax({
    url: "https://www.example.com/search.php",
    method: "post",
    data:{
        eventname: eventname,
        types: JSON.stringify(types) //serializied types[]
    },
    dataType:"text",
    success:function(data)
    {
        $('#eventsList').html(data);
        $('#eventsList').slick($opts);
    }
});

answered Jan 10, 2019 at 18:06

rollingthedice

1,1258 silver badges17 bronze badges

2 Comments

Jasper Over a year ago

jQuery does this automatically by default. From the documentation: Data to be sent to the server. It is converted to a query string, if not already a string.. api.jquery.com/jquery.ajax

rollingthedice Over a year ago

As of the newest version, yes. But in older version this action might not be performed by default.

Zohar Revivo · Accepted Answer · 2019-01-10 18:40:11Z

0

You might want to try this solution too:

JS:

data: { typesArray: types }

PHP:

$types = $_REQUEST['typesArray'];

answered Jan 10, 2019 at 18:40

Zohar Revivo

5351 gold badge7 silver badges18 bronze badges

Collectives™ on Stack Overflow

Pass Checkbox Array into AJAX call

3 Answers 3

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Linked

Related