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
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    Create a Spinning, Zooming Effect with CSS3

    In case you weren't aware, CSS animations are awesome.  They're smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects...

  • By
    Ana Tudor’s Favorite CodePen Demos

    Cocoon I love canvas, I love interactive demos and I don't think I have ever been more impressed by somebody's work than when I discovered what Tiffany Rayside has created on CodePen. So I had to start off with one of her interactive canvas pens, even though...

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!