我正在使用PHP 7(Phalcon 3),Bootstrap 3JQuery 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

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


在我的PHP脚本中,我将轻松遍历这些数据。那么我该如何构建此JSON array

最佳答案

您的第一个问题是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>

09-30 17:08
查看更多