联系表格，单击后禁用提交按钮

Question

I downloaded a working contact form and added a few things that I needed, but now I have another problem that I do not know how to fix it.

After form is submitted, the button can still be clicked a few times and that will send more than one email to me. After form is submitted, it should disable the button.

HTML:

<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>

And here is the JavaScript code:

$("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Did you fill in the form properly?");
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});

Answer 1

Disable the button on form submit, like this:

$("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Did you fill in the form properly?");
    } else {
        // everything looks good!
        event.preventDefault();
        $("#form-submit").prop("disabled",true);
        submitForm();
    }
});

Answer 2

Multiple things can be done here depending on your complete architecture. You can use jQuery's one function, although I don't recommend it, because this will mean that until you load the page the contact form can be submitted only once.

What I do is, that I would disable the button, $("#form-submit").attr("disabled","disabled"); OR $("#form-submit").addClass("inactive") and in your CSS use

#form-submit{
    pointer-events:none;
    opacity:0.6;
    /*etc etc*/
}

and when your ajax returns just do the opposite(remove the disabled attribute or class). Also, set the input, textarea values to empty string.

Answer 3

const $contactForm=document.getElementById("contactForm");
const $submitButton=$contactForm.getElementById("form-submit");
$contactForm.addEventListener("submit",e => {
e.preventDefault();
$submitButton.setAttribute("disabled","disabled") }) //first is attribute, second is value, disabled

Javascript is simple, keep it simple.