Submit Button Enabling

By  on  

"Enabling" you ask? Yes. We all know how to disable the submit upon form submission and the reasons for doing so, but what about re-enabling the submit button after an allotted amount of time. After all, what if the user presses the "stop" button immediately after submitting the form? They'd be screwed. Why not re-enable the submit button after an allotted amount of time so that the user may re-submit?

The MooTools JavaScript

window.addEvent('domready',function() {
		var subber = $('submit');
		subber.addEvent('click',function() {
			subber.set('value','Submitting...').disabled = true;
			(function() { subber.disabled = false; subber.set('value','Resubmit'); }).delay(10000); // how much time?  10 seconds
		});
	});

Of course, this isn't ideal in all situations. It is, however, a nice touch if your system can accommodate for it.

Update: Upon submission, the button's message changes to "submitting..." and once enabled, the message changes to "Resubmit." Thank you to Facundo Corradini for the suggestion!

Recent Features

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

  • By
    AJAX For Evil:  Spyjax with jQuery

    Last year I wrote a popular post titled AJAX For Evil: Spyjax when I described a technique called "Spyjax": Spyjax, as I know it, is taking information from the user's computer for your own use — specifically their browsing habits. By using CSS and JavaScript, I...