Creating an AJAX Login Form using MooTools

Posted on December 21, 2008, under AJAX 

Login without Page Refresh

This is a tutorial useful to learn how to Ajaxify a basic login form. To do that we’ll use the powerful framework MooTools:

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

First, let’s start creating the login page. I will explain you the code in details.

login.php

<?php
require_once 'config.php';

// Is the user already logged in? Redirect him/her to the private page

if(isSet($_SESSION['username']))
{
header("Location: private.php");
exit;
}
?>

We start with the inclusion of the config.php file. Beside the configuration variables, in this file the session data is initialized. This is neccesary in order to check if the ‘username’ session is already registered when login.php is accessed. If it is, the user will be redirect to the members area.

Now it’s time to add the HTML code in the file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>AJAX Login Form</TITLE>

  <META name="Author" Content="Bit Repository">

  <META name="Keywords" Content="ajax, login, form, mootools">
  <META name="Description" Content="A nice & simple AJAX Login Form">

  <script type="text/javascript" src="js/mootools-1.2.1-core-yc.js"></script>
  <script type="text/javascript" src="js/process.js"></script>

  <link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>

As you can notice, the ‘js’ folder contains: mootools-1.2.1-core-yc.js (the compact JavaScript framework) & process.js. The latter is the file that ajaxifies the login form.

<BODY>
<center>

<div id="status">

<fieldset><legend align="center">Authentication</legend>

<div id="login_response"><!-- spanner --></div>

<form id="login" name="login" method="post" action="do_login.php">
<table align="center" width="300" border="0">

<tr>
<td width="80">Username</td><td><input id="name" type="text" name="username"></td>

</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"></td>
</tr>

<tr>
<td>&nbsp;</td>
<td><input type="checkbox" name="autologin" value="1">Remember Me</td>

</tr>
<tr>
<td>&nbsp;</td>
<td><input id="submit" type="submit" name="submit" value="Login">

<div id="ajax_loading"><img align="absmiddle" src="images/spinner.gif">&nbsp;Processing...</div></td>
</tr>
</table>
</form>

</fieldset>

</div>
</center>
 </BODY>
</HTML>

Initial Form

When the form is submitted the code from process.js is triggered. Here’s the content of the file (I will explain you below how it works):

/*
Credits: Bit Repository
URL: http://www.bitrepository.com/web-programming/ajax/login-form.html
*/

// Preload Images
img1 = new Image(16, 16);
img1.src="images/spinner.gif";

img2 = new Image(220, 19);
img2.src="images/loader-bar.gif";

window.addEvent('domready', function() {

	$('login').addEvent('submit', function(e) {
		// Prevents the default submit event from loading a new page.
		e.stop();

		// Show the spinning indicator when pressing the submit button...
		$('ajax_loading').setStyle('display','block');

		// Hide the submit button while processing...
		$('submit').setStyle('display','none');

		// Set the options of the form's Request handler.
		// ("this" refers to the $('login') element).
		this.set('send', { onComplete: function(response) {
			$('ajax_loading').setStyle('display','none');

	if(response == 'OK')
	{
        $('status').set('html', '<div id="logged_in">You are now logged it! <br />' +
        '<img align="absmiddle" src="images/loader-bar.gif">' +
        '<br /> Please wait while we redirect you to your private page...</div>');

        setTimeout('go_to_private_page()', 3000);
	}
	else
	{
	$('login_response').set('html', response);
	// Show the login button
	$('submit').setStyle('display','block');
        }
		}});

		// Send the form.
		this.send();
	});
});

function go_to_private_page()
{
window.location = 'private.php'; // Members Area
}

MooTools comes with a custom window Event (‘domready’) that is fired when the HTML DOM is loaded: before images, videos and other contents. It is similar to JQuery’s Ready Event: $(document).ready().

window.addEvent('domready', function() {
    // js code here
});

Was the ‘submit’ event triggered? In this case, the first thing that should be done is to prevent the default submit event from loading a new page:

e.stop();

After that, show the spinning GIF image & hide the submit button:

$('ajax_loading').setStyle('display','block');  // Show the DIV
$('submit').setStyle('display','none'); // Hide the 'Submit' button

These changes apply to the elements having the id ‘ajax_loading’ & ‘submit’ which are the DIV (with the snipper GIF loader) and the ‘Login’ button.

Ajax Login - Processing

The options of the form Request’s handler should be set: “this” refers to the ‘login’ element. After the AJAX request completes the ‘response’ will contain the output sent from do_login.php. If it is “OK”, replace the content (the form) of the ‘status’ DIV with a successful confirmation message and redirect the user after 3 seconds, using the go_to_private_page() function:

$('status').set('html', '<div id="logged_in">You are now logged it! <br />' +
              '<img align="absmiddle" src="images/loader-bar.gif">' +
              '<br /> Please wait while we redirect you to your private page...</div>');

setTimeout('go_to_private_page()', 3000);

Ajax Login - Authenticated

If it’s something else (an error in this case) show the ‘response’ inside the ‘login_response’ DIV element (which is above the login form) and unhidden the ‘Login’ button:

$('login_response').set('html', response);
// Show the login button
$('submit').setStyle('display','block');

Ajax Login - Wrong Credentials

Eventually, after this options are set, send the form:

this.send();

DEMO
- – - – - – - – - – - – - – - – -
Username: demo
Password: demo
- – - – - – - – - – - – - – - – -

You can find all the necessary files in the ZIP archive. If you have any comments regarding this tutorial, please post them!

Get Basic

This version contains the basic features that were discussed in the tutorial.

Download | View Demo

Get Premium

For just $4, you can get a more advanced AJAX Login script. It is available for sale in the Envato Marketplace. Use the link below to view the features of the Simple, Secure, Login application.

Comment via Facebook

comments

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)

POSTING RULES:

  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like 'abc@domain.com' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.