如何防止表单在 Jquery 提交事件中被重新提交？答案

【问题标题】：How to prevent a form from being resubmitted on Jquery Submit Event?如何防止表单在 Jquery 提交事件中被重新提交？
【发布时间】：2018-06-26 19:11:25
【问题描述】：

我有一个带有 ajax 调用的表单和 jquery 提交事件。单击提交后，此表单将重新提交。我不想禁用该按钮只是不想让它重新提交表单。尝试在提交事件后添加“return false”，但没有成功

window.addEventListener("load", () => {
$(".bmlf-form").on("submit", event => {     

    event.preventDefault();
    const values = $(event.target).serializeArray();

    $.ajax({
        url: `apiURL`,
        type: 'Post',
        crossDomain: true,
        async: true,
        datatype: 'json',
        data: JSON.stringify(objectifyForm(values)),
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            alert("Thank you");
            $(".bmlf-form")[0].reset();

        },
        error: function () {
            alert("Please try again");
        }
    });
});
});

【问题讨论】：

它应该可以工作，为什么没有调用代码？ jQuery 真的在寻找表单吗？方法被调用了吗？
我觉得这个问题不完整。您何时不希望提交再次发生？我假设如果 ajax 通过错误方法，您可能希望允许他们再次提交，不是吗？
该方法被调用并且一切正常，但是一旦我单击提交按钮，它就会再次被单击。换句话说，提交按钮上发生了多次点击。 @epascarello
@Taplar 是的。如果出现问题，他们应该能够纠正表格中的错误并重新提交。但是一旦一切都很好并且我提交了它，它会被提交一次，而不是立即再次提交，而无需我做任何事情。只需单击一次即可在提交按钮上多次提交。
然后发生了其他事情。根据您提供的代码，不会发生二次提交。

标签： javascript jquery html ajax forms

【解决方案1】：

我想通了。我的表单有一个 "was-validated" 类，在初始提交请求后附加到 "form" 元素。所以在第一次提交点击之后，验证完成并且这个类被附加到表单中。由于它是一个 ajax 调用，因此页面不会重新加载，并且此类仍附加到我的表单，该表单再次被调用并在表单上进行验证。

解决方案是一旦事件成功，我必须从表单中删除此类。我用了jquery的.removeClass()函数，现在一切都好了。

在初始页面加载时

   <form class="bmlf-form needs-validation" method="POST" novalidate="">

最初点击提交按钮后

<form class="bmlf-form needs-validation was-validated" method="POST" novalidate="">

jQuery 删除类代码

  //some jQuery Code here
 success: function (data) {
            $(".bmlf-form").removeClass('was-validated');
            $(".bmlf-form")[0].reset();
            alert("Thank you");
        }

【讨论】：