In this article I will show you how you can create a modern submit button. Do you want to know why I mentioned in the title the “Enabling” word? In fact, the reason is simply linked to how you can re-enable again a submit button after being disabled.
In other words, when a user clicks on the submit button, this one is grayed, then after a while (time you choose by yourself) the button becomes once again enabled in order to be clicked and so on.
This technique can be helpful for quite a few Ajax applications.
If you are sure that your form could be successfully submitted in a given amount of time, you have only to specify this amount of time (+ X ms) in the following jQuery function. So when things go wrong (problem in the submit action), the submit button will be simply enabled again and asking the user to submit for another time.
jQuery
$(function() {
var input=$("input:submit");
input.click(function () {
$(this).attr("disabled", true);
$(this).attr("value", "Submitting...");
//Resubmit again after 4000ms
setTimeout(function(){ input.removeAttr("disabled"); input.attr("value", "Submit again");}, 4000);
});
});
Of course you can customize this jQuery script so that the amount of time can be automatically filled out contingent on the success or not of the submit action (server-side control).
How to encourage this blog if you like it:
- Promote our sponsors;
- Add any kind of comment or critic;
- Ask me directly by email if you prefer.
I am 
OOPS a nice new trick, I like it.
Nice and all, but the problem that I have with this you've stated plainly: "If you are sure that your form could be successfully submitted in a given amount of time". -- What if it took longer? What about an unsuccessful request?
Disabling or removing a submit button on click is a fine idea to prevent double|multiple posting, but bringing it back to an enabled state suggests that the form submitted through an asynchronous process, further suggesting that there would an appropriate callback method for that request instead of leaving it strictly for time to decide.
jQuery's $.ajax method accepts an object that can have members 'success' and 'error', and those would be the times I'd decide to re-enable the button.
Many jQuery methods have room for an additional callback method as a last argument, and they are very useful. "When this function completes, execute this other function". Like stacking sequences of animation, applying a callback to a submit request (and smartly responding to errors) is critical.
Bibby,
Thanks a lot for you clarification.
The jQuery's $.ajax example you gave is important. I agree with you when you gave also the example showing that it can be critical. But the thing I don’t understand is that why we can’t control jQuery's $.ajax method sequence?. For example, if it goes wrong, you renable the submit button. What do you think?