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

要解决该问题，您应该在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
    });
});

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

如何使用Javascript .submit（function（event）{用于多个元素？

2 个答案: