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

好的，我有以下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处理事务

要使用它，我只需要将

表单ajax

id添加到表单中，并添加一个id为

表单消息的空div

；表单的任何响应都将显示在此div中，而无需重新加载页面

我的问题是，我想对多个表单使用相同的Javascript调用，但我不太清楚如何使用

我想把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中的加载顺序

---

有没有办法解决这个问题，以便我可以重复使用这个处理程序/事件。

要解决这个问题，您应该在submit函数中创建一个变量，该变量引用当前表单。检查下面的代码，并进行修改：

//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
    });
});

希望有帮助。祝你好运。

当你这样做时：

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

您正在将

form

设置为可能的元素集合，而不仅仅是一个。这可能不是什么大问题：

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

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

因为jQuery只需将该处理程序添加到集合中每个表单的

submit

事件中即可。但这在这里非常重要：

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

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

因为您正在序列化整个表单元素集合，而不仅仅是一个。在事件处理程序的范围内，您可以使用

this

引用运行时正在处理的特定元素：

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

这样，您只序列化该表单范围内的内容，而不是所有表单

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

$(form).attr('action')

其范围还应仅限于调用处理程序的表单：

$(this).attr('action')

---

在事件处理程序中使用

this

而不是

form