Home » JavaScript » jQuery » jQuery Disable button after submit Example

About Siddharth Seth

Siddharth Seth
Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.

jQuery Disable button after submit Example

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://code.jquery.com/jquery-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.

4. Example in Action

Now we can run our code by typing the below commands at the root of the project

>npm install
>npm start

Next we navigate to the url http://localhost:8080 to see our code in action. On clicking the Submit button we can see the below results.

Project Output

5. Download the Source Code

Download
You can download the full source code of this example here: jQuery Disable button after submit Example
(+1 rating, 1 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Java Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. JPA Mini Book
2. JVM Troubleshooting Guide
3. JUnit Tutorial for Unit Testing
4. Java Annotations Tutorial
5. Java Interview Questions
6. Spring Interview Questions
7. Android UI Design
and many more ....
I agree to the Terms and Privacy Policy

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of