如何对多个元素使用 Javascript .submit(function(event) {？答案

【问题标题】：How to use Javascript .submit(function(event) { for multiple elements?如何对多个元素使用 Javascript .submit(function(event) {？
【发布时间】：2014-09-13 03:29:11
【问题描述】：

好的，所以我有以下 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');

但这并没有帮助。在这两种情况下，如果多个表单与 this 一起使用：

<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 中加载的顺序。

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

【问题讨论】：

在事件处理程序中使用this 而不是form。了解有关 jQuery 事件处理基础知识的更多信息：learn.jquery.com/events/event-basics

标签： javascript jquery html ajax forms

【解决方案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')

【讨论】：

这是最好的答案

【解决方案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
    });
});

希望对您有所帮助。祝你好运。

【讨论】：