How to send an array to php with jquery ajax?

Question

I tried to create an array with serializeArray and post it to php. but my code doesn't work. I read this questions (question) but I didn't understand my mistake yet.

this is my ajax code

    var str = $("form").serializeArray();
    $.ajax({
        type: "POST",
        url: "myfile.php",
        data: str,
        success: function (value) {
            $("#mydata").html(value);
        }
    });

HTML Code

<form>
    <select name="num0">
        <option value="">num0</option>
        <option value="12">12</option>
        <option value="13">13</option>
    </select>
    <select name="num1">
        <option value="">num2</option>
        <option value="123">123</option>
        <option value="133">133</option>
    </select>
    <select name="num2">
        <option value="">num3</option>      
        <option value="12345">12345</option>
    </select>
</form>

PHP Code

$postarr = array();
$num=$_POST['num0'];
$postarr[]=$num;
$num=$_POST['num1'];
$postarr[]=$num;
$num=$_POST['num2'];
$postarr[]=$num;

it giving me the following error message:

Notice: Undefined index: num0 (and same message for other variables).

By the way, English is not my native language; please excuse typing errors.

I don't know if this is related or not, but your `
` tag needs a method. Since it isn't proper HTML, the serialize may not work. — Sablefoste, Mar 25 '14 at 16:33
use `$("form").serialize()`, not `$("form").serializeArray();` see http://stackoverflow.com/a/10430571/689579 — Sean, Mar 25 '14 at 16:36
@SableFoste: `method` and `action` are optional. By default, the form will submit to the current page via GET. — gen_Eric, Mar 25 '14 at 16:37
Works fine for me: http://jsfiddle.net/XN6aJ/ (Check the headers of the request) — gen_Eric, Mar 25 '14 at 16:41
Thanks @Rocket , is there any way to send the value without button? I read something about .change on jquery, but I don't know how to use it on this problem. because I have 3 select — Arvin Firouzi, Mar 25 '14 at 17:33
@user1967994: You could bind the `.change` event then send the request once all 3 selects have a set value. — gen_Eric, Mar 25 '14 at 17:34

andrew · Answer 1 · 2014-03-25T16:40:42.980

0

Try this:

   $.ajax({
     type: "POST",
     url: "myfile.php",
     data: $('form').serialize(),
     success: function (value) {
         $("#mydata").html(value);
     }
 });

and instead of

$num=$_POST['num0']

use

$num=filter_input(INPUT_POST,'num0');

edited Mar 25 '14 at 16:40

answered Mar 25 '14 at 16:35

andrew

9,313
7
30
61

Thanks @andrew, but when I tried to echo $num, it doesn't echo $num value. – Arvin Firouzi Mar 25 '14 at 17:22

score 0 · Answer 2 · answered Mar 25 '14 at 16:38

With the name attribute of an input field you are able to create an array in your $_POST:

<form method="post">
    <select name="values[num0]">
        <option value="">num0</option>
        <option value="12">12</option>
        <option value="13">13</option>
    </select>
    <select name="values[num1]">
        <option value="">num2</option>
        <option value="123">123</option>
        <option value="133">133</option>
    </select>
    <select name="values[num2]">
        <option value="">num3</option>      
        <option value="12345">12345</option>
    </select>
</form>

In your php you can use it like this:

$postarr = $_POST['values'];
echo $postarr['num0'];

Thanks @Dinistro ,but it giving me this error: values are undefined — Arvin Firouzi, Mar 25 '14 at 17:14
@ArvinFirouzi did you also copy my html? By me, it works fine. — Dinistro, Mar 26 '14 at 06:46

score 0 · Answer 3 · answered Mar 25 '14 at 17:10

Add an id to your form,

  <form id="my_form">
<select name="num0">
    <option value="">num0</option>
    <option value="12">12</option>
    <option value="13">13</option>
</select>
<select name="num1">
    <option value="">num2</option>
    <option value="123">123</option>
    <option value="133">133</option>
</select>
<select name="num2">
    <option value="">num3</option>      
    <option value="12345">12345</option>
</select>

Just change

  var str = $("#my_form").serialize();

In your script

How to send an array to php with jquery ajax?

3 Answers3