Question

这是一个字段，实际上是一个很大的形式

<form class="bmlf-form needs-validation" method="POST" novalidate>
  <input type="text" class="form-control" id="contactPhone" name="ContactPhone" required>
 <button type="submit" class="orange marketing-button bmlf-submit">SUBMIT</button>
</form>

提交时，此表单将调用api并执行某些操作。就功能而言，一切正常。提交表单后，将向用户显示一个警告框，在“谢谢警报”框中显示一个“谢谢” 和“确定” 按钮。问题是用户单击警报框中的“确定”后，将再次重新提交表单，并且表单验证将自动调用。警报框的行为就像我在不输入任何数据的情况下单击表单“提交按钮”一样。在警报框中单击“确定”后，我只需要刷新页面即可。

我正在进行ajax调用，因此我的表单jquery也具有prevent.default（），并且在表单上还具有reset函数，以在提交表单后重置所有字段。

jQuery提交按钮代码

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

    // Trimming input data to eliminate white spaces
    var allInputs = $(":input");
    allInputs.each(function () {
        $(this).val($.trim($(this).val()));
    });

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

}）;

Form.js代码

 (function () {
window.addEventListener(
    "load",
    () => {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        const forms = document.getElementsByClassName("needs-validation");
        // Loop over them and prevent submission
        Array.prototype.filter.call(forms, form => {
            form.addEventListener(
                "submit",
                event => {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopImmediatePropagation();
                        event.stopPropagation();
                    }
                    form.classList.add("was-validated");
                },
                false
            );
        });
    },
    false
);

}）（）;

Answer 1

您可以执行以下操作。首先，我将为您的按钮添加一个ID值，让我们说id ='submitButton'。

然后，当您的on-submit功能关闭时，您可以像这样添加一行jQuery

$("#submitButton").attr("disabled", "disabled");

这会将按钮设置为禁用状态，不仅阻止了进一步的单击，而且还向用户表明其单击已成功。

单击警报框“确定”后，如何防止重新提交html表单？

1 个答案: