基于 JQuery 克隆元素构建 JSON

Question

我正在使用 PHP 7 (Phalcon 3)、Bootstrap 3 和 JQuery 3。这是我的codepen。当您单击添加按钮时，它将内联克隆表单。

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

所以现在我需要将数据发送到服务器，但我不知道如何创建格式良好的 JSON 到 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>