我正在使用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
:[
{
"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>