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!

Cloudinary

Recent Features

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • 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

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!