在一次Ajax请求之后，我通过克隆一个包含表单的DIV来创建了多条记录。设想创建了x5条 DIV记录，也就是x5行。我可以通过点击每条记录上的表单按钮逐条提交每条记录的数据，其中name和雇员ID的值会被提交。现在我想要能够用一个按钮一次性提交这x5条记录的表单。这有可能吗？

<div class="client">

<form class="myForm">
    <input type="text" class="name" name="" value="">
    <input type="text" class="employid" name="" value="">
    <button class="test" type="submit">Submit</button>
</form>





<script>

//SEARCH For Records
$(document).ready(function(){
$(document).on('click', '.test', function(event){ 
event.preventDefault();



       var self=this; //Variablise $(this) to use it in a ajax function below.
       var form = $(this).closest('form');

       var formfield1= form.find('.name').val();
       var formfield2= form.find('.employid').val();

        $.ajax({
        url: 'scripts/test_post.sql.php',
        type: 'get',
        data: { name:formfield1, employid:formfield2},
        dataType: 'JSON',
        success: function(data){

    alert(JSON.stringify(data));


}         
 }           
 });       

  });
    });

</script>

解决方案

是的——完全有可能实现。
现在你正在逐个提交每个表单，因为你的点击处理程序会获取最近的一个表单，并且只发送该表单的值。

要一次性提交这5 条克隆记录，你需要：

1. 一个全局按钮
2. 循环遍历所有的 .myForm 表单
3. 收集所有的 .name 与 .employid 的值
4. 将它们作为一个数组，在一次AJAX请求中发送

我建议你这样做：

<form id="mainForm">
    <div class="client">
        <input type="text" name="name[]">
        <input type="text" name="employid[]">
    </div>

    <button type="submit">Submit All</button>
</form>


<script>
$('#mainForm').on('submit', function(e){
    e.preventDefault();

    $.ajax({
        url: 'scripts/test_post.sql.php',
        type: 'POST',
        data: $(this).serialize(),
        success: function(data){
            console.log(data);
        }
    });
});
</script>

这更简洁，易于维护，并且避免了嵌套的表单（这是无效的HTML）。