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
    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 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 Keyboard Shortcuts with Mousetrap

    Some of the finest parts of web apps are hidden in the little things.  These "small details" can often add up to big, big gains.  One of those small gains can be found in keyboard shortcuts.  Awesome web apps like Gmail and GitHub use loads of...

  • By
    jQuery Wookmark

    The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should."  Basic web users probably think nothing of it but as a developer, I can appreciate the...

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!