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
    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
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

Incredible Demos

  • By
    CSS Kwicks

    One of the effects that made me excited about client side and JavaScript was the Kwicks effect.  Take a list of items and react to them accordingly when hovered.  Simple, sweet.  The effect was originally created with JavaScript but come five years later, our...

  • By
    Editable Content Using MooTools 1.2, PHP, and MySQL

    Everybody and their aerobics instructor wants to be able to edit their own website these days. And why wouldn't they? I mean, they have a $500 budget, no HTML/CSS experience, and extraordinary expectations. Enough ranting though. Having a website that allows for...

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!