Disable the submit button after click while waiting for server, and reenable it after x seconds

Question

0.00/5 (No votes)

See more:

HTML form submission. When clicking on the submit button I want the button to show that it has been clicked and is waiting for the server (which may take 10+ seconds), and prevent the user from resubmiting.

Just disabling the button on click has a potential problem in that in case something goes wrong, the user won't be able to try again because the button is disabled - e.g. if the action page shows an error, and they go back to the form, they can't submit because the button will still be disabled.

I'm aware that disabling and reenabling the button is not a fool proof solution to prevent double submissions, but it's sufficient in my case.

I don't want to use AJAX. I can use Jquery.

What I have tried:

Below is my code.

Problems:
- The form doesn't submit. I don't know why.
- The form doesn't validate. If a required input is not filled, there will be no visual indication like the default for HTML/browsers.
- Even if it does submit, will it actually start submit immediately, and simultaneously wait for the server to respond (like I want), or can I possibly end up with a silly solution where the timer doesn't run at the same time as the server is processing, making it completely useless?

<form action="somepage.html">
..some more inputs here...
<input id="submit-button" onclick="submitClicked();" class="btn" type="submit" name="submit" value="Submit"/>
</form>

function submitClicked() {
        var btn = $('#submit-button');
        btn.prop('disabled', true);
        btn.prop("value", "Wait...");

        setTimeout(function() {
            btn.prop("value", "Try again?");
            btn.prop('disabled', false);
        }, 15000);
}

Posted 31-Aug-21 9:45am

Jame_T

Updated 31-Aug-21 22:37pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2021-08-31T22:37:00

Solution 1

You need to disable the button after the form has been submitted. Use another setTimeout to do that:

JavaScript

function submitClicked(){
    setTimeout(function(){
        $("#submit-button").prop("disabled", true).val("Wait...");
    }, 100);
    
    setTimeout(function(){
        $("#submit-button").prop("disabled", false).val("Try again?");
    }, 15000);
}

Posted 31-Aug-21 22:37pm

Richard Deeming

Comments

Jame_T 1-Sep-21 14:34pm

Thanks! That seems to work, except the whole function will still run if input validation fails (a required inpout is not filled). Meaning, the button still will get disabled, while the browser focuses the input and says its required.
Any workaround for that?

Richard Deeming 2-Sep-21 3:41am

Check that the form is valid before disabling the button. For example, using the reportValidity method:
HTMLFormElement.reportValidity() - Web APIs | MDN[^]