为多个表单提交动态 JQuery 表单答案

【问题标题】：Dynamic JQuery Form Submit for Multiple Forms为多个表单提交动态 JQuery 表单
【发布时间】：2013-11-04 23:36:06
【问题描述】：

我有 PHP 搜索数据库，然后为找到的每个结果回显一个 html 表单。这些通过 AJAX 加载到主 HTML 页面到文档加载的 div 中。

现在我想让每个提交的表单都有监听器。它们都有相同的输入。每个表单都有一个递增的处理器 ID（processor1、processor2、processor3 等）。

因此，根据结果，它可能少至一个表格或 50 个表格。有没有一种动态的方式来做一个表单提交函数，而不是编写无数重复的函数？

【问题讨论】：

“做表单提交功能”是什么意思？
$("#processor1").on("submit", function(event) {

标签： javascript php jquery html forms

【解决方案1】：

如果你有

<form id="form1">
<form id="form2">

你可以使用类选择器

<form id="form1" class="forms">
<form id="form2" class="forms">

在 jQuery 中：

$(function() {
 $('.forms').submit(function(e){
   e.preventDefault(); //Prevent submit
   console.log($(this)); //Current form submiting

   //Make ajax call for current form
 })
})

如果你需要为每个表单提供额外的数据，你可以使用数据属性

<form id="form2" class="forms" data-myattr="myvalue">

得到它

...
$(this).data('myattr'); //myvalue
...

【讨论】：

如果我只想对提交的表单使用输入值，我会这样做吗？ $("this .inputclass").val();而不是 $("#form1 .inputclass").val();
$(this).find('.inputclass').val() 可以。
$(this) 是当前表单对象。您可以使用 $(this).find("selector") 来搜索表单中的元素。

【解决方案2】：

如果（出于某种原因）不能使用类，您也可以使用“开头为”selector：

$('#processor*').submit(function (e) { 
    e.preventDefault(); 
    ...
});

请注意，上述函数应作为加载表单的 AJAX 函数的回调调用。

【讨论】：