如何使用JavaScript .submit（函数（事件）{多个元素

Question

好了，我有以下的Javascript：

//Form handling 
var form = $('#form-ajax'); 
var formMessages = $('#form-messages'); 
$(form).submit(function(event) { 
    // Stop the browser from submitting the form. 
    event.preventDefault(); 

    // Serialize the form data. 
    var formData = $(form).serialize(); 

    $.ajax({ 
     type: 'POST', 
     url: $(form).attr('action'), 
     data: formData 
    }).done(function(response) { 
     //Do something 
    }).fail(function(data) { 
     //Do something 
    }); 
}); 

基本上覆盖默认表单提交和使用Ajax，而不是处理事情

要使用它，我只需要在form-ajax ID添加到窗体，并添加id为form-messages一个空div;从形式的任何响应将无需重新加载页面显示在这个div

。我的问题是我想要的使用这个相同的Javascript调用多种形式，我不能解决如何。

我认为改变form-ajax到一个类会有所诀窍。所以

var form = $('.form-ajax'); 

而不是：

var form = $('#form-ajax'); 

但它并没有帮助。在这两种情况下，如果多个形式使用具有这样的：

<div id="form-messages"></div> 

<form class="form-ajax" method="post" action="dosomething.php"> 
</form> 
<form class="form-ajax" method="post" action="dosomethingelse.php"> 
</form> 

提交任一形式将触发第二被张贴。我假设由于它们在DOM中加载的顺序。

任何想法如何解决这个问题，以便我可以重新使用这一个处理程序/事件。

Answer 1

当你这样做：

var form = $('.form-ajax'); 

要设置form潜在元素的集合，不只是一个。这可能不是一个大问题，在这里：

$(form).submit(function(event) { 
    // event handler 
}); 

因为jQuery将仅仅是处理程序添加到submit事件集合中的每个表格。但它很变成一个大问题在这里：

var formData = $(form).serialize(); 

因为你序列化整个集合表单元素，不只是一个。在事件处理程序的范围，你可以使用this引用特定元素在运行时被处理：

var formData = $(this).serialize(); 

这样，你只序列什么是在一种形式的范围，而不是所有的形式。

同样的问题在这里也适用：

$(form).attr('action') 

这也应该作用域，只剩下那些调用的处理形式：

$(this).attr('action') 

Answer 2

为了解决这个问题，你应该在提交函数中创建一个变量，该函数有一个对当前表单的引用。检查您的代码波纹管的修改：

//Form handling 
var form = $('.anyClass'); 
var formMessages = $('#form-messages'); 
$(form).submit(function(event) { 
    // Current form 
    var currentForm = $(this); 
    // Stop the browser from submitting the form. 
    event.preventDefault(); 

    // Serialize the form data. 
    var formData = currentForm.serialize(); 

    $.ajax({ 
     type: 'POST', 
     url: currentForm.attr('action'), 
     data: formData 
    }).done(function(response) { 
     //Do something 
    }).fail(function(data) { 
     //Do something 
    }); 
}); 

希望它有帮助。祝你好运。