Сборка JSON на основе элементов клона JQuery

Question

Я использую PHP 7 (Phalcon 3), Bootstrap 3 и JQuery 3. Вот мой кодовый блок . Когда вы нажимаете на кнопку добавления, она клонирует форму.

HTML

<div class="row form-inline">
    <div class="form-group col-xs-4">
        <label>First name</label>
        <input type="text" id="firstname" name="firstname" class="form-control">          
    </div>
    <div class="form-group col-xs-4">
        <label>Last name</label>
        <input type="text" id="lastname" name="lastname" class="form-control">          
    </div>
    <div class="form-group col-xs-4">
        <label>check</label> <br>
        <input type="checkbox" class="checkbox" name="check">
    </div>
</div>

<button type="button" class="btn btn-primary" id="btn-add">Add</button>

JS

  $("#btn-add").click(function() {
    $('.row.form-inline:last').clone(true).insertAfter('.row.form-inline:last');

    // Don't care about this, it's a checkbox library 
    $('input').iCheck({
      checkboxClass: 'icheckbox_minimal-blue',
      increaseArea: '20%',
      checked: false
    });
    $('.row.form-inline:last .checkbox').iCheck('uncheck');
    return false;
  });

Итак, теперь мне нужно отправить данные на сервер, но я не знаю, как мне создать хороший форматированный * от 1020 * до Ajax.

Я хотел бы создатьJSON Array в зависимости от количества созданных клонов, таких как this :

[
  {
    "firstname" : "John",
    "lastname" : "Doe",
    "check" : true
  },
  {
    "firstname" : "Mark",
    "lastname" : "Davidson",
    "check" : false
  },
  {
    "firstname" : "Mike",
    "lastname" : "Green",
    "check" : true
  }
]

И в моем сценарии PHP я собираюсь легко просмотреть эти данные. Так как я могу построить это JSON array?

Answer 1

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

Затем, основываясь на вашей HTML-структуре, вы можете использовать map() для построения массива:

var data = $('.form-inline').map(function() {
  var $container = $(this);
  return {
    firstname: $container.find('.firstname').val(),
    lastname: $container.find('.lastname').val(),
    checkbox: $container.find('.checkbox').prop('checked'),
  }
}).get();

Вот полный рабочий пример:

$("#btn-add").on('click', function() {
  $('.row.form-inline:last').clone(true).insertAfter('.row.form-inline:last');
});

$('#test').on('click', function() {
  var data = $('.form-inline').map(function() {
    var $container = $(this);
    return {
      firstname: $container.find('.firstname').val(),
      lastname: $container.find('.lastname').val(),
      checkbox: $container.find('.checkbox').prop('checked'),
    }
  }).get();
  console.log(data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row form-inline">
  <div class="form-group col-xs-4">
    <label>First name</label>
    <input type="text" name="firstname" class="form-control firstname">
  </div>
  <div class="form-group col-xs-4">
    <label>Last name</label>
    <input type="text" name="lastname" class="form-control lastname">
  </div>
  <div class="form-group col-xs-4">
    <label>check</label> <br>
    <input type="checkbox" class="checkbox" name="check">
  </div>
</div>

<button type="button" class="btn btn-primary" id="btn-add">Add</button>

<button id="test">Test</button>