jQuery post input with same names but in different arrays

Question

I have various forms in a single page. All the forms get submitted by the below jQuery function. All is ok, but there is a specific form that has duplicated input names. In fact in this form the inputs get cloned on request. So for example, this form represents how many people attend an event. The user can add as many people as he wants and adding details of each by filling the form. The inputs get cloned on the fly and inserted inside the form. The problem is that jQuery is sending them in the wrong way, like shown below, and my php code is not responding well. In fact it just sees one of the posted "people" instead that them all.

Example of jquery post:

protagonist_description zxcvvcbhcvbjfg
protagonist_description jfghjfghjh
protagonist_email   
protagonist_email   
protagonist_name    zxcvzxcv
protagonist_name    dfghdfgh
protagonist_phone   
protagonist_phone   
protagonist_role    zxcvxzcv
protagonist_role    hgfjgfhjhgh
protagonist_surname zcxvzxcv
protagonist_surname dfghd
protagonist_video   
protagonist_video   
protagonist_website 
protagonist_website

Example of PHP response:

Array
(
    [protagonist_name] => dfghdfgh
    [protagonist_surname] => dfghd
    [protagonist_role] => hgfjgfhjhgh
    [protagonist_description] => jfghjfghjh
    [protagonist_email] => 
    [protagonist_phone] => 
    [protagonist_website] => 
    [protagonist_video] => 

)

As you see it just gets the last posted.

Here is my jQuery function:

$(".save").click(function() {
        $.ajax({
            type: 'POST',
            data: $('form[name="wizard_form"]').serialize(),
            success: function() {
                $('#publish').modal('show');
            }
        });
    });

Please note that all the cloned inputs are inside the same form. I can only use one form. So please do not suggest using more cloned forms. It won't work for my code as it is.

I am looking for a way to correctly merge the inputs with the same name in specific arrays posted to the PHP code.

How to do that?

just use square bracket, you may also define some key to it, e.g name="protagonist_name[]", or name="protagonist[name][]" — ikhsan, Jun 30 '13 at 14:28

chrislondon · Accepted Answer · 2013-06-30T14:42:18.757

You first need to change your form inputs to be arrays by adding [] to the name like so:

<input name="protagonist_description[]" />

And then in your PHP it will look like this:

Array
(
    [protagonist_name] => Array
    (
        [0] => zxcvzxcv,
        [1] => dfghdfgh,
    )
    [protagonist_surname] => Array
    (
        [0] => zcxvzxcv,
        [1] => dfghd,
    )
    [protagonist_role] => Array
    (
        [0] => zxcvxzcv,
        [1] => hgfjgfhjhgh,
    )
    [protagonist_description] => Array
    (
        [0] => zxcvvcbhcvbjfg,
        [1] => jfghjfghjh,
    )
    [protagonist_email] =>  Array
    (
        [0] => ,
        [1] => ,
    )
    [protagonist_phone] =>  Array
    (
        [0] => ,
        [1] => ,
    )
    [protagonist_website] =>  Array
    (
        [0] => ,
        [1] => ,
    )
    [protagonist_video] =>  Array
    (
        [0] => ,
        [1] => ,
    )
)

At this point you can then loop through the values like this:

for ($i = 0, $max = count($_POST['protagonist_name']); $i < $max; $i++) {
    $first_protagonist = array(
        'protagonist_name'    => $_POST['protagonist_name'][$i],
        'protagonist_surname' => $_POST['protagonist_surname'][$i],
        // ...
    );
}

Per David's suggestion, here's the code for a foreach if you wish:

foreach ($_POST['protagonist_name'] as $key => $val) {
    $first_protagonist = array(
        'protagonist_name'        => $val,
        'protagonist_surname'     => $_POST['protagonist_surname'][$key],
        'protagonist_description' => $_POST['protagonist_description'][$key],
        // ...
    );
}

@chrislondon You should use foreach instead. It's faster then looping + count. I recommend you go read this: http://stackoverflow.com/questions/10057671/how-foreach-actually-works — David Bélanger, Jun 30 '13 at 14:39
@DavidBélanger Does it make a difference that I'm only counting once? Notice I set $max to the `count()` and never `count()` again. — chrislondon, Jun 30 '13 at 14:40
@chrislondon Yes and noted. But, you use one function that isn't required in this process. Unless you have a need to know how many entries in an array, `count` is not useful. If you do not need to know but wish to know after a loop, do a foreach and put a variable that increment inside the foreach instead. You will gain generation time. — David Bélanger, Jun 30 '13 at 14:42
@DavidBélanger Cool! Thanks for the info! I've added a `foreach` to the answer — chrislondon, Jun 30 '13 at 14:45

score 0 · Answer 2 · answered Jun 30 '13 at 14:23

You need to add brackets to your input's name.

Example:

<input name="my_name[]" value="david" />
<input name="my_name[]" value="john" />
<input name="my_name[]" value="francis" />

$_POST['my_name'] will be an array containing all results.

Array
(
    [my_name] => Array
    (
                    [0] => david
                    [1] => john
                    [2] => francis
    )
)

score 0 · Answer 3 · answered Jun 30 '13 at 14:23

To handle arrays of input elements, in other words defined as having the same element name. If you define the name with two square brackets in the end it will be transformed to an array on the server side for php.

 <input type='text' name='elmname[]' .....
 <input type='text' name='elmname[]' .....

if you submit the form consisting these elements and then on the php side you will see that $_POST['elmname'] will be an array

jQuery post input with same names but in different arrays

3 Answers3