UXRO UXRO - 16 days ago 9
Javascript Question

Contact form, disable submit button after clicked

I downloaded working contact form and added few things I need to it, but now I have another problem that i don't know how to fix.

After form is submitted, the button can still be clicked few times and that will send more than one mail to me. After form is submitting, 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 JavaScript:

$("#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

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