Using Dotter for Form Submissions

By  on  

One of the plugins I'm most proud of is Dotter. Dotter allows you to create the typical "Loading..." text without using animated images. I'm often asked what a sample usage of Dotter would be; form submission create the perfect situation. The following code changes a submit button's text to "Submitting..." (and animated dot patterns) during the submission process, resetting the button text when the AJAX request is complete.

The MooTools JavaScript

window.addEvent('domready',function() {
	/* get elements */
	var submit = document.id('submit'), form = document.id('share-comment');
	/* create Dotter instance */
	var dotter = new Dotter(submit,{
		delay: 200, //character delay
		message: 'Submitting',
		property: 'value'
	});
	/* when the form is submitted */
	form.addEvent('submit',function(e) {
		//stop the event
		e.stop();
		//assuming it's a valid post...
		if(validatePost()) {
			//stop / failure action
			var action = function() {
				dotter.stop();
				submit.set('value','Submit');
			};
			//create an AJAX request
			var request = new Request({
				url: form.get('action'),
				method: form.get('method'),
				link: 'ignore',
				//start the Dotter when the request is sent
				onRequest: function() {
					dotter.start();
				},
				//stop it when the AJAX request is successful
				onSuccess: action,
				//stop it when the AJAX request is failure
				onSuccess: action
			}).send(document.id('share-comment').toQueryString());
			//put the form back!
		}
	});
});

When the form is submitted the Dotter instance begins its animation. Once the AJAX request is complete (regardless of success or failure), the Dotter is stopped, changing the button text to its original text.

There you have it: a practical, straight-forward usage of MooTools Dotter. Feel free to download Dotter from the Forge and let me know if you have questions or suggestions!

Recent Features

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

Incredible Demos

  • By
    HTML5’s window.postMessage API

    One of the little known HTML5 APIs is the window.postMessage API.  window.postMessage allows for sending data messages between two windows/frames across domains.  Essentially window.postMessage acts as cross-domain AJAX without the server shims. Let's take a look at how window.postMessage works and how you...

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Discussion

  1. Simple, but a cool detail. Thanks.

  2. Gabriel

    Great job! Aesthetically I would prefer the button not to resize with every dot you add but to have the max size since the beginning, other than that it’s perfect :P

  3. Champ

    I have seen better. Pick it up walsh

  4. @Champ: That’s what she said. Oh, wait, no..

  5. Champ

    lol well done good sir

  6. What do you think about having 3 spaces and then have the dots animate? I say this because the growing and shrinking button looks weird imo.

  7. @James: It would be hard to say that the space and dot would be the same size. What may work well is modifying the Dotter class to automatically inject the dots, put SPAN tags around each one, and toggle its opacity or visibility.

    The problem with doing that, however, is the button would then have a large, invisible “gap” to the right side.

  8. alelo

    @David Walsh: how about dots but color:transparent?

  9. deef

    @alelo: the transparent value would not be as widely supported (http://www.w3.org/TR/css3-color/#transparent)

  10. Evan

    One other thing you could add is ignoring clicks while its “Submitting” to stop people from double clicking or getting anxious and clicking it again before your done doing whatever it is that required the loading msg.

  11. @James: Well, I’ve liked the growing and shrinking button, because it gets attention of the user :) then it knows that it’s sending.

  12. I would love to see a demo of this using jQuery please =)

  13. esta super Cool, muy buena presentacion de un submit. =]

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!