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?

Answer 1

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],
        // ...
    );
}

Answer 2

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

Answer 3

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
    )
)