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);
}