通过ajax脚本循环处理页面上的表格

Question

我有一个有很多小的单行表单的页面，每个表单都有5个项目。这些表单具有id form1，form2，form3等，并且项目的id和submit按钮遵循相同的模式。我已经写出了以下用于处理表单的ajax脚本，其中变量$ n对应于表单和项目编号。我不确定的是如何循环浏览页面上每个表单的脚本。我是否需要先计算页面上的表单数量，然后创建一个循环，如果有的话，我该怎么做？

$(".submit$n").click(function() { 

     var action = $("#form$n").attr('action'); 
     var form_data = { 
      name: $j("#name$n").val(), 
      date: $j("#date$n").val(), 
      attended: $j("#attended$n").val(), 
      paid: $j("#paid$n").val(), 
      method: $j("#method$n").val(), 
      is_ajax: 1 
     }; 

     $j.ajax({ 
      type: "POST", 
      url: action, 
      data: form_data, 
      success: function(response){ 

       if(response == 'success') 

        $j("#form$n").fadeOut(800); 
        console.log(response); 
      } 
     }); 

     return false; 
    }); 

}); 

Answer 1

我很抱歉，但我不认为这是被正确设置，并且接受的答案也不是这样，它只是非常混乱。我不确定您的原始代码是否已复制到您拥有的每种表格中（因为整个$n可变的东西会让我感到困惑，并让我觉得您已经有好几次了），但如果是这样，则不需要。这就是我会用的：

$(document).ready(function() { 
    $(".submit").click(function() { 
     var $this = $(this); 
     var $form = $this.closest("form"); 
     var action = $form.attr('action'); 

     var form_data = { 
      name: $form.find("[id^=name]").val(), 
      date: $form.find("[id^=date]").val(), 
      attended: $form.find("[id^=attended]").val(), 
      paid: $form.find("[id^=paid]").val(), 
      method: $form.find("[id^=method]").val(), 
      is_ajax: 1 
     }; 

     $.ajax({ 
      type: "POST", 
      url: action, 
      data: form_data, 
      success: function (response) { 
       if (response == 'success') { 
        $form.fadeOut(800); 
       } 
       console.log(response); 
      } 
     }); 

     return false; 
    }); 
}); 

只要给所有的提交按钮一个“提交”类，这应该工作正常。只是为了确保，你的HTML将有这样的格式：

<form id="form1" action="page1.php"> 
    <input type="text" id="name1" name="name1" /><br /> 
    <input type="text" id="date1" name="date1" /><br /> 
    <input type="text" id="attended1" name="attended1" /><br /> 
    <input type="text" id="paid1" name="paid1" /><br /> 
    <input type="text" id="method1" name="method1" /><br /> 
    <input type="submit" class="submit" value="Submit" /> 
</form> 

只要你明白发生了什么，JavaScript的发现提交按钮的父窗体单击时。然后，用这种形式，它发现有一个id属性与“名称”，“日期”等启动你可以做到这一点，因为你已经清楚地分离控制到自己的形式所有后代。所以用这个代码，你可以放心，当你点击提交按钮，你抓住所有的控件的值从它的形式。

Answer 2

添加一个公共类，你所有的提交按钮，如：<input type="submit" id="submit1" name="submit1" class="submit" />

然后更改您的代码：

$('.submit').on('click', function() { 
    var n = this.id.substr(6); 
    // n is the number of the form. 6 because the word submit has 6 characters. 
    // You might want to do this some other way. 

    // you can get the rest of the values by doing 
    $('#name' + n).val() 
    // and so on 
});