Мне нужно отправить дополнительные поля, добавленные функцией добавления с помощью ajax

Question

Я столкнулся с препятствием, касающимся отправки полей добавления с помощью ajax.

Вот описание моей проблемы.

Моя HTML-форма

<div id="append-fields">
    <input name="firstName[]" id="firstName" value="john"></input>
    <input name="lastName[]" id="lastName" value="Doe"></input>
</div>
<button onclick="appendFunction()" type="button">Add a new row</button>

Послещелкнув по кнопке add a new row, я получаю еще два таких поля:

    <div id="append-fields">
      <input name="firstName[]" id="firstName" value="anna"></input>
      <input name="lastName[]" id="lastName" value="Kondo"></input>
    </div>

Теперь мне нужно отправить следующие данные с помощью ajax

        firstName = 'john',lastName = 'Doe'
        firstName = 'anna',lastName = 'kondo'

Но я получаю только один набор данных, напримерэто

     firstName = 'john',lastName = 'Doe'

вот это myscript

        <script>
        insert = [];
        insert[0] = $("#firstName").val();
        insert[1] = $("#lastName").val();
        $.ajax({
            url: 'myUrl',
            method: 'POST',
            data: {take:insert},
            error: function () {
            },
            success: function (response) {
                $('#overlay').addClass("hidden");
                jQuery('#body').html(response);
            }
        });
   </script>

вот мой PHP

      function myUrl(){
         $data = $_POST["take"];
       }

где ошибка?

Answer 1

Вы можете использовать formdata

    var data = new FormData($('form')[0]);
    data .append('extra', add_data);

или seriallize или seriallizeArray по классу, который я бы выделил

var form_data = $('.post_these').serialize();

PS: post_these является входным полем класса

В PHPдоступ по имени

$firstName = $_POST['firstName'];

или когда данные являются массивом, создайте объект

$data= (object) $_POST['data'];
$data-YfirstName; // use this way    

PS используйте это для отладки, проверьте в своем контроллере, что вы получаете

<code>echo '<pre>';
print_r($_POST);
echo '

';выход();

Answer 2

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

Поскольку вы все равно используете jquery, используйте $('form').serialize() или $('form').serializeArray() для вывода массива, чтобы получить все входные данные формы и ее значения.Вы должны будете обернуть эти входные данные в элемент формы, прежде чем сделать это.

Или, как предложено выше, зациклить элементы вручную и получить такие значения.