克隆具有数组名称的输入字段仅获得 php 中的第一个值？

Question

I clone my input fields using jquery. and get the value in PHP using var_dump first

Example

<form action="save.php" method="POST">
<div id="div-container">
 <div class="div-clone">
   <input name="name[]">
   <input name="bday[]">
   <input name="address[]">
   <input name="gender[]">
 </div>
</div>
<input type="submit" value="SUBMIT">
</form>

Now when then I'm cloning it using

$('#div-container').append($('#div-clone').get(0).outerHTML);

PHP CODE

if(isset($_POST['SUBMIT'])
{
 var_dump($_POST);
}

Does this result the array key value is also the same as the first one? because I only get one value and only the first one. Is there any way to solve this?

Thanks

EDIT I already getting data from my form my only problem is the input array that I clone. it's only getting the first value.

EDIT AGAIN When I try to add just input with the same name of an array without cloning its works perfectly. Any solution regarding this? Thanks

Answer 1

Firstly remove the id from the content you want to clone. If you don't you'll end up with duplicates which is invalid and can cause issues in JS and the UI. A better approach is to use classes.

In addition, if you want to copy elements simply use clone() . Try this:

 $('button').on('click', () => $('.div-clone:first').clone().appendTo('#div-container'));

 input { width: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Clone</button> <div class="div-clone"> <input name="name[]"> <input name="bday[]"> <input name="address[]"> <input name="gender[]"> </div> <div id="div-container"></div>

Answer 2

Output from your code is

array(4) {
  ["name"]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
  ["bday"]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
  ["address"]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
  ["gender"]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
}

So it's correct. I cloned once, so I get two arrays of "name", two arrays of "bday" etc. I guess that you want another format, this is a little trickier I think. Try this:

<button id="clone">Clone</button>

    <form method="POST">
        <div id="div-container">
            <div class="div-clone">
                <input data-field="name" name="data[0][name]">
                <input data-field="bday" name="data[0][bday]">
                <input data-field="address" name="data[0][address]">
                <input data-field="gender" name="data[0][gender]">
            </div>
        </div>
        <button type="submit">Submit</button>
    </form>

    <pre>
    <?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        var_dump($_POST);
    }
    ?>
    </pre>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var i = 0;
        $('button#clone').on('click', () => {
            const clone = $('.div-clone:first').clone();
            i++;
            clone.find('input').each(function() {
                const fieldname = $(this).attr('data-field');
                $(this).attr('name', 'data[' + i + '][' + fieldname + ']');
            });
            clone.appendTo($('#div-container'));
        });
    </script>

This will give you the following output for one clone.

array(1) {
  ["data"]=>
  array(2) {
    [0]=>
    array(4) {
      ["name"]=>
      string(1) "1"
      ["bday"]=>
      string(1) "1"
      ["address"]=>
      string(1) "1"
      ["gender"]=>
      string(1) "1"
    }
    [1]=>
    array(4) {
      ["name"]=>
      string(1) "2"
      ["bday"]=>
      string(1) "2"
      ["address"]=>
      string(1) "2"
      ["gender"]=>
      string(1) "2"
    }
  }
}

The field name is exactly the PHP-Array structure. Using name[] is just an array counting up. But I think all four fields should make one entry. So you have to make one entry (named data), make it an array, which is counted up (by "i") and then you add the field name (name, bday etc.)

Answer 3

After messing around for so many times I solved it.

It seems on my framework that there's a UI error that make my form end on the near div element after cloning. Thank you for all your answer. all your answer is right so I'll upvote them. Thank you.