Please pardon me if it is a basic thing, because I am a new learner of Javascript/jQuery. I have been trying to disable submit button to disable multiple submits. I have e across multiple solutions here as well, but all those used specific form name. But I wanted to apply a global solution for all forms on all pages so I dont have to write code on each page, so I put this in footer, so all pages have:

$('input:submit').click(function(){
        $('input:submit').attr("disabled", true);
});

This code works on all the forms in all pages as I wanted, but if there are HTML5 required fields in form and form is submitted without them, of course notifications are popped but button still gets disabled. So, I tried with this:

$('input:submit').click(function(){
    if ($(this).valid()) {
        $('input:submit').attr("disabled", true);
        $('.button').hide();
    });
});

But this does not work. Kindly help me so that jQuery only disables when all HTML5 validation is done. Thanks

Please pardon me if it is a basic thing, because I am a new learner of Javascript/jQuery. I have been trying to disable submit button to disable multiple submits. I have e across multiple solutions here as well, but all those used specific form name. But I wanted to apply a global solution for all forms on all pages so I dont have to write code on each page, so I put this in footer, so all pages have:

$('input:submit').click(function(){
        $('input:submit').attr("disabled", true);
});

This code works on all the forms in all pages as I wanted, but if there are HTML5 required fields in form and form is submitted without them, of course notifications are popped but button still gets disabled. So, I tried with this:

$('input:submit').click(function(){
    if ($(this).valid()) {
        $('input:submit').attr("disabled", true);
        $('.button').hide();
    });
});

But this does not work. Kindly help me so that jQuery only disables when all HTML5 validation is done. Thanks

• javascript
• php
• jquery
• html
• forms

• 3 may be you can try $('form').on('submit',function(){$(this).find('input:submit').attr("disabled", true);}); – Umesh Sehta Commented Mar 11, 2015 at 6:05
• ments can't select as answer glad if it worked for you :) – Umesh Sehta Commented Mar 11, 2015 at 6:33

4 Answers 4

Try this and let me know:

$('input:submit').click(function(){
    if ($(this).closest("form").checkValidity()) {
        $('input:submit').attr("disabled", true);
        $('.button').hide();
    });
});

Ruprit, thank you for the tip. Your example did not work for me (in Firefox), but it helped me a lot.

Here is my working solution:

$(document).on("click", ".disable-after-click", function() {
    var $this = $(this);

    if ($this.closest("form")[0].checkValidity()) {
        $this.attr("disabled", true);
        $this.text("Saving...");
    }
});

Since checkValidity() is not a jQuery function but a JavaScript function, you need to access the JavaScript element, not the jQuery object. That's the reason why there has to be [0] behind $this.closest("form").

With this code you only need to add a class="disable-after-click" to the button, input, link or whatever you need...

It is better to attach a handler to the submit event rather than a click event, because the submit event is only fired after validation is successful. (This saves you from having to check validity yourself.)

But note that if a submit button is disabled then any value they may hold is NOT submitted to the server. So we need to disable the inputs after form submission.

The question is pounded by the new HTML5 attribute form which allows associated inputs to be anywhere on the page as long as their form attribute matches a form ID.

This is the JQuery snippet that I use:

$(document).ready( function() {
    $("form").on("submit", function(event) {
        var $target = $(event.target);
        var formId  = $target.attr("id");

        // let the submit values get submitted before we disable them
        window.setTimeout(function() {

            // disable all submits inside the form
            $target.find("[type=submit]").prop("disabled", true);

            // disable all HTML5 submits outside the form
            $("[form=" + formId + "][type=submit]").prop("disabled", true);
        }, 2); // 2ms
    });
});

---[ WARNING ]---

While disabling submit buttons prevents multiple form submissions, the buttons have the unfortunate side effect of staying disabled should the user click the [Back] button.

Think about this scenario, the user edits some text, clicks submit (and get redirected to different page to view the edits), clicks back to edit some more, ... and ... they can't re-submit!

The solution is to (re-)enable the submit button on page load:

// re-enable the submit buttons should the user click back after a "Save & View"
$(document).ready( function() {
    $("form").each(function() {
        var $target = $(this);
        var formId  = $target.attr("id");

        // enable all submits inside the form
        $target.find("[type=submit]").prop("disabled", false);

        // enable all HTML5 submits outside the form
        $("[form=" + formId + "][type=submit]").prop("disabled", false);
    });
});

Try this

`jQuery('input[type=submit]').click(function(){ return true;jQuery(this).prop('disabled','disabled');})`

run this code on successful validation of the form