Disable Submit Button on Form Submit

Disable Submit Button on Form Submit

When a form is being submitted, sometimes, as the users are waiting, they might click more than once the submit button. This may cause duplicates submissions. 

First, we will disable the submit button when the form is valid.

$('form').submit(function () {
    if ($(this).valid()) {
        $(this).find('button[type="submit"]').prop('disabled', true);
    }
});

We can make it more beautiful if we add a loader as the user is waiting. For the loader in this example, I used FontAwesome Fonts

$('form').submit(function () {
    if ($(this).valid()) {
        $(this).find('button[type="submit"]').prop('disabled', true)
                                                            .attr('style', 'background:none!important;border:none!important')
                                                            .html('<i class="fa fa-spinner fa-spin"></i>');
    }
});

After you install FontAwesome Fonts on your project, you can download the above code from here and you are ready.