jQuery Disable button after submit Example

Siddharth SethJuly 19th, 2019Last Updated: July 18th, 2019

0 894 2 minutes read

In this article, we will look at how to disable the submit button after a form submit in jQuery. It will prevent the user from submitting the form multiple times. We also cater to the possibility that the form submit is invalid or fails validation and thus we would re enable the button in such case. We will use jQuery library for this example. Using jQuery to select the appropriate submit button of each form on the page and disabling the correct one to prevent duplicate form submits.

So without further delay lets start building our example application. For the purposes of this example we will use the following stack for our application.

We use Node.js which is a server side JavaScript framework to quickly spin up a web server. jQuery is a UI library to iron over differences in JavaScript implementation between browser vendors and browser versions. Visual Studio Code IDE is a free tool that I am most comfortable with but you are free to use one that you feel at home with.

1. Application Structure

Our application folder structure looks like below:

jQuery Disable button - Project Structure — Project Structure

2. HTML Markup

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="https://www.javacodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vjquery-3.4.1.slim.min.js"
        integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
    <script src="myscript.js"></script>
    <style>
        body {
            height: 500px;
            width: 100%;
        }
        .flex-container {
            height: 100%;
            display: flex;
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <form>
            <fieldset>
                <legend>JCG -- jQuery Disable Submit Button Example</legend>
                <label for="inputEmail">Email address</label>
                <input type="email" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter email">

                <label for="inputPassword">Password</label>
                <input type="password" id="inputPassword" placeholder="Password">

                <input type="checkbox" id="rememberMe">
                <label for="rememberMe">Remember Me</label>

                <button type="submit">Submit</button>
            </fieldset>
        </form>
    </div>
</body>
</html>

This is what our landing page markup looks like, it has a simple login form with a submit button. It prompts the user for their email address and password and provides a Remember Me checkbox. I have used some style rules to layout the page.

3. jQuery Script

To disable the submit button we will add a handler for the form’s submit event. In this event handler we will select the submit button and set its disabled attribute to disable it. We will also set the text of the button to a string, submitting form, to indicate to the user that the form is under processing. The selector for submit event handler would look like below:

$('form').submit(function (event) {});

Once we select the form we will, on submit event, disable the button which is a part of the form. To just select the button that is part of the form and not others on the page. We will use the below selector:

$('button', this);

Notice the second param in the selector, it ensures that the button which is part of this form is selected. Once selected we will set the attribute using the attr jQuery function. As well as set the text of the button to “submitting…” like below:

$("button", this).attr("disabled", "disabled");
$("button", this).text("Submitting...");

Final version of our script, residing in myscript.js looks like below:

myscript.js

 $(document).ready(function() {
    $("form").submit(function(event) {
        $("button", this).attr('disabled', 'disabled');
        $("button", this).text("Submitting...");
        event.preventDefault();
    });
});

Notice the event.preventDefault() method call, it is there for the purposes of this demo and cancels the form submit and subsequent page refresh. So that we can see our script in action. It is not necessary other wise.