In this article I’ll explain how to submit your forms using some Mootools magic. The techniques used are pretty basic and easy to understand. Sit back and relax, or just take a look at the result.

Setting up the form

First, we need a form. So let’s make a simple comment form: 

<form id=\"myForm\" action=\"script.php\">
	<table cellpadding=\"0\" cellspacing=\"0\">
		<col width=\"100\">
		<col width=\"200\">
		<tr>
			<td>Name:</td>
			<td><input type=\"text\" name=\"author\" value=\"\" /></td>
		</tr>
		<tr>
			<td>Email:</td>
			<td><input type=\"text\" name=\"email\" value=\"\" /></td>
		</tr>
		<tr>
			<td>Comment:</td>
			<td><textarea name=\"comment\"></textarea></td>
		</tr>
		<tr>
			<td colspan=\"2\"><input type=\"submit\" id=\"submit\" value=\"submit\" /></td>
		</tr>
	</table>
</form>

This form consists of four controls. Two textboxes for the authors name and email address, a textarea for the comment text and a submit button. In the next part I’ll explain how to submit the form asynchronously using Mootools.

Submit the form using Ajax

It’s surprising how easy it is to submit the form using ajax. Basically we need to do three things:

  1. Listen for the ‘click’ event on the submit button.
  2. Stop the event from submitting the form.
  3. Send the form using $(formElement).send()

A solution could look something like this: 

$('submit').addEvent( 'click', function(evt){
	// Stops the submission of the form.
	new Event(evt).stop();

	// Sends the form to the action path,
	// which is 'script.php'
	$('myForm').send();
} );

Ok, that’s cool, we can submit a form asynchronously in about three lines of code. But this is not all, when using ajax for form submission, you need to let the user know what is happening/has happened. In the next part I’ll tell how to do that.

Show progress to the user

When you’re using ajax to submit a form, you need to show the user that something is going on in the background. A way to do that is to show an animated ajax loader gif. At ajaxload.info you can generate pretty sweet ajax loaders. First choose from around 20 different animated gifs, and specify the back and foreground color. In the article ‘Mootools: Ajax & XHR classes’ I explained how to show and hide the loader gif. To give you a quick example, here’s how to do it, with GMail style progress indicators: 

// Variable that holds the effects.
var fx = {
	'loading': new Fx.Style( 'loading', 'opacity',{ duration: 200 } ),
	'success': new Fx.Style( 'success', 'opacity',{ duration: 200 } ),
	'fail': new Fx.Style( 'fail', 'opacity',{ duration: 200 } )
};

// Hides the loading div, and shows the el div for
// a period of four seconds.
var showHide = function( el ){
	fx.loading.set(0);
	(fx[ el ]).start(0,1);
	(function(){ (fx[ el ]).start(1,0); }).delay( 4000 );
}

// Listen for click events on the submit button.
$('submit').addEvent( 'click', function(evt){
	// Stops the submission of the form.
	new Event(evt).stop();

	// Sends the form to the action path,
	// which is 'script.php'.
	$('myForm').send({
		onRequest: function(){
			// Show loading div.
			fx.loading.start( 0,1 );
		},
		onSuccess: function(){
			// Hide loading and show success for 3 seconds.
			showHide( 'success' );
		},
		onFailure: function(){
			// Hide loading and show fail for 3 seconds.
			showHide( 'fail' );
		}
	});
} );

Putting this all together, and style things a bit, we get a responsive form which submission is asynchronous. You can go see the example, or you can download the zipped example code.