Получение данных из jquery л oop в php

Question

У меня есть форма, в которой я добавляю новые строки в один из div через jquery

<div class="packs">
  <div>
     <input type="text" placeholder="Enter Name" name="pname" id="pname" value="Test" />
     <img class="add-icon" src="media/icon/add.png" height="30" width="30">
  </div>
</div>

В jquery, я делаю это:

$(document).ready(function(){      
  $(".packs").on('click', '.add-icon', function () {
     $(".packs").append('<div><input type="text" placeholder="Enter Name" name="pname" id="pname" value="Test" /><img class="add-icon" src="media/icon/add.png" height="30" width="30"></div>');
  });
});

Что мне нужно, так это получить массив всех элементов, которые я добавил. $_POST['pname'] возвращает только последний введенный элемент.

Может кто-нибудь подскажет, что здесь делать.

Answer 1

Если вы хотите сохранить в базе данных, я предполагаю, что вы отправляете эту форму в конце заполнения.

Затем вы должны добавить индексы к отдельным строкам. Вы получите массив под переменной $_POST['pname'].

$(document).ready(function(){      
    let id_no = 0;
    $(".packs").on('click', '.add-icon', function () {
        id_no += 1;
        $(".packs").append('<div><input type="text" placeholder="Enter Name" name="pname[' + id_no + ']" class="pname" value="Test" /><img class="add-icon" src="media/icon/add.png" height="30" width="30"></div>');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="packs">
    <div>
        <input type="text" placeholder="Enter Name" name="pname[0]" id="pname" value="Test" />
        <img class="add-icon" src="media/icon/add.png" height="30" width="30">
    </div>
</div>