Клонирование полей ввода с именем массива только получает первое значение в php?

Question

Я клонирую свои поля ввода, используя jquery. и получить значение в PHP, используя сначала var_dump

Пример

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

Теперь, когда я клонирую его, используя

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

PHP CODE

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

Значит ли это, что значение ключа массива также совпадает с первым? потому что я получаю только одно значение и только первое. Есть ли способ решить эту проблему?

Спасибо

РЕДАКТИРОВАТЬ Я уже получаю данные из своей формы, моя единственная проблема - входной массив, который я клонирую. он получает только первое значение.

ВНОВЬ РЕДАКТИРОВАТЬ Когда я пытаюсь добавить только вход с тем же именем массива без клонирования, его работы отлично. Любое решение по этому поводу? Спасибо

Answer 1

Сначала удалите id из контента, который вы хотите клонировать. Если вы этого не сделаете, вы получите недопустимые дубликаты, которые могут вызвать проблемы в JS и пользовательском интерфейсе. Лучшим подходом является использование классов.

Кроме того, если вы хотите скопировать элементы, просто используйте clone(). Попробуйте это:

$('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

Вывод из вашего кода

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"
  }
}

Так что это правильно. Я клонировал один раз, поэтому я получил два массива "name", два массива "bday" et c. Я думаю, что вы хотите другой формат, это немного сложнее, я думаю. Попробуйте это:

<code><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);
    }
    ?>
    

Answer 3

После того, как много раз возился, я решил это.

Мне кажется, что в моей среде есть ошибка пользовательского интерфейса, которая приводит к завершению формы на ближнем элементе div после клонирования. Спасибо за ваш ответ. все ваши ответы верны, поэтому я буду голосовать за них. Спасибо.