Question

我有一个表单和一个用ajax调用的jquery Submit事件。单击提交后，此表单将重新提交。我不想禁用按钮，只是不想让它重新提交表单。尝试在Submit事件之后添加“ 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");
        }
    });
});
});

Answer 1

我知道了。我的表单具有“已验证” 类，该类在初始提交请求后追加到“ 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");
        }

如何防止在Jquery Submit Event上重新提交表单？

1 个答案: