Creating an AJAX Login Form using MooTools

Posted on December 21, 2008, under AJAX, Bookmark it

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.

Purchase this script via CodeCanyon

Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!

December 21, 2008
article by Gabriel C.
37 comments

Tags: ajax login

How to Implement a jQuery AJAX Login Form into a Modal Box
at April 24, 2009 with 85 comments
Login with AJAX: A WordPress Plugin to Login without Page Refresh
at January 2, 2010
WordPress Login Modal Box: SimpleModal Login
at January 23, 2010
Creating a CSS TableLess Form (using Labels or DIVs)
at September 1, 2008 with 9 comments
AJAX Form with CAPTCHA, Realtime Validation and PHP Backend
at September 2, 2008 with 547 comments

37 Replies to "Creating an AJAX Login Form using MooTools"

Matthias
December 27, 2008 at 5:39 PM

Reply

Hi! The ajax-login-form.zip is faulty, it can't be unzipped. Could you mail me a working zip? Thank's, Yours, Matthias
Gabriel
December 28, 2008 at 2:26 AM

Reply

I've just downloaded the ZIP file and unzipped it successfully. I've used WinZip 12.0 to make the archive. You are not the first that is telling me the archive is not valid. I've tried so many ways to ZIP the tutorials’ files and all seem to be useless because they can't be open by anyone :( Please try to unzip it with WinZip 12.0. If you can't, let me know and I'll send you the files somehow.
joseph
December 28, 2008 at 10:49 AM

Reply

well i did download it and it not open 2 !! there was an error with the zip file and i wanna ask one other question could this login form comes in popup ? i mean when u click on a button it open a inside window or popup and shows the login form to login?
Gabriel
December 28, 2008 at 11:17 AM

Reply

Yes, this form can be integrated in a popup window without any problems (if you know what you're doing, of course). You can just copy & paste the source from the current page if you're still having problems with the downloaded ZIP archive.
joseph
December 29, 2008 at 3:18 PM

Reply

thanks you for the reply :) the files are okie i extract them they did work but sorry if i am bothering you can u give me some advice where to find a on click popup as ajax multibox or somthing like it to put the login form in it ?
Gabriel
December 31, 2008 at 4:26 AM

Reply

Try the DHTML Modal Dialog Box: http://www.dhtmlgoodies.com/scripts/modal-message/demo-modal-message.html
Prasad
January 31, 2009 at 9:22 PM

Reply

I'm develop resource Allocation system and I want to hide content in main page when ajax loaded. How can I do this ?

When I enter new page from my private page and when i back I want to log my private page . How can I do this ?

Sometimes I refresh my site it miss my loging details . How can I solve
This problem ?
Thank You
S.Sakthivel
February 18, 2009 at 1:55 PM

Reply

it was worked good in IE but not in forefox

what is the mistake in that

thank you
1. Gabriel
  February 18, 2009 at 4:15 PM
  
  Reply
  
  I’ve just tested the Ajax Login in FireFox and it works fine. Perhaps you are using an older version of FireFox (under 2).
sam
February 27, 2009 at 11:34 AM

Reply

i want to multi user login
nj
March 3, 2009 at 8:38 PM

Reply

This doesn’t work completely. If I copy and paste the link to the “private page” (http://www.bitrepository.com/demo/ajax-login-form/private.php) I can easily access it without having to log in again. Is there a fix to this?

Thanks for sharing!
1. Gabriel
  March 3, 2009 at 11:20 PM
  
  Reply
  
  It does work completely. You can access the ‘private’ page because you have marked the “Remember Me” checkbox. Otherwise you can’t access private.php without being logged in.
nj
March 4, 2009 at 12:00 AM

Reply

Webmaster,

Thanks for your response! But no, I do not have the “Remember Me” box checked. You can see for yourself, copy and paste your link and you will see that you can access that page regardless of if you signed in or not:

http://www.bitrepository.com/demo/ajax-login-form/private.php
1. Gabriel
  March 4, 2009 at 11:07 AM
  
  Reply
  
  :) Don’t you think I’ve checked this over and over again? When you access the private page you will be redirected to the login page. Perhaps you’ve tested in the same browser session (while you were still logged in). I also suggest you to try on different browsers. Anyways, this tutorial is meant to give an idea to others of how they can use AJAX to create a login form.
nj
March 4, 2009 at 11:58 PM

Reply

Webmaster,

You are right. And I did not mean to under estimate you or your skillz in anyway! Thanks so much for your response and for this tutorial! You rock!!

Best regards!!
Lea
March 9, 2009 at 3:07 AM

Reply

Hi,

I love your work here… Very nice, and clean.

Cheers, Lea!
John Smith
March 21, 2009 at 9:47 PM

Reply

Hi,

I tried using downloading this and using this for my site. I seem to have a problem, because I can get the login page to work and the swivel image to work. However, one second after I try to login, the swivel stops and the page does not redirect to anything. Help please?
Diego
April 19, 2009 at 8:19 PM

Reply

Hello

Very good page, and im using this login form with MySQL, but is not working. The validation is working but i need to refresh the page, is not going automatic to private page.
if u can help,please.

thanks

-Diego

This is code i add to config.php

// ———- LOGIN INFO ———- //

$db_host=”localhost”;
$db_name=”vete”;
$username=”root”;
$password=”";
$db_con=mysql_connect($db_host,$username,$password);
$connection_string=mysql_select_db($db_name);

// Connection
mysql_connect($db_host,$username,$password);
mysql_select_db($db_name);

$result = mysql_query(“SELECT password FROM medicos WHERE usuario=’$post_username’”);
if($row = mysql_fetch_array($result)) {
mysql_free_result($result);
$config_username = $post_username;
$config_password = $row["password"];
echo $config_username.”/”;
echo $config_password;
}
mysql_close();

$cookie_name = ‘siteAuth’;
// ———- ———- //
1. emrecandan
  May 2, 2010 at 9:41 AM
  
  Reply
  
  it doesnt work
Tharanga
July 16, 2009 at 9:36 PM

Reply

Wow Its working 100%
Muhammad Ismail
August 11, 2009 at 12:04 AM

Reply

Good work thanks for this job…..
Twitter Trackbacks for Creating an AJAX Login Form using MooTools [bitrepository.com] on Topsy.com
August 29, 2009 at 2:29 AM

[...] Creating an AJAX Login Form using MooTools http://www.bitrepository.com/ajax-login-form.html – view page – cached This an AJAX Contact Form build with the well-known MooTools framework. — From the page [...]
mac
September 24, 2009 at 11:18 PM

Reply

hello there your post is working great!!!…but i have a question? can we put multiple usernames and password on it….best example is i will use 5 or more users for it thnks
K.S.M.Rajapaksha
November 12, 2009 at 3:40 AM

Reply

awesome, Thanks great I have done some improvements too to suite my security requirements. It works nice. Thanks you very much.
Top 20 Ajax Tutorials | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver
November 18, 2009 at 12:33 AM

[...] This is a sweet Ajax login form tutorial that uses MooTools. Plus the login form has a neat little preloader! View Tutorial [...]
hajid
December 9, 2009 at 5:39 AM

Reply

Hello author, thanks it is very nice and very usable for me. I found also something with Jquery http://www.phpstring.co.cc/ajax-login-module/
coder77
December 29, 2009 at 1:04 AM

Reply

Anyone know how I can change this from php to asp?
farhan
April 2, 2010 at 10:17 PM

Reply

Hi It is very good tutorial, but its work fine in my local server but when i try to use it from my web host server it saw that private.php page was not appear and saw ‘ok’ in ‘login.php’ page. Any Suggestion?
1. Gabriel C.
  April 8, 2010 at 8:37 AM
  
  Reply
  
  I believe you didn’t setup the script correctly on your web host server. Can you share the URL to the login form?
emrecandan
May 1, 2010 at 11:12 AM

Reply

I really tried to intagrade sql database but counldn’t do it please some help me
Alexander
June 8, 2010 at 8:24 PM

Reply

I can’t combine with MySQL. Please rewrite the code that can connect with MySQL. thanks in advance.
Alexander
June 9, 2010 at 10:05 PM

Reply

After several test i get manage to connect with MySQL database. Thank you for your script.
zubair
September 21, 2010 at 7:49 AM

Reply

nice work, i have just used that script and comes out good for me. thanks
Dana
October 4, 2010 at 1:47 PM

Reply

Could someone explain how to modify this for multiple user logins using MySQL?
Spyro
October 24, 2010 at 6:23 AM

Reply

How come this login form doesn’t trigger the browser built-in function – “remember password”?
young
February 22, 2011 at 2:07 AM

Reply

i cant connect with this code to mysql can anyone post a working code…thanks
aykak
April 27, 2011 at 8:03 PM

Reply

this was awsome hey but I want to use this method form in smarty template any advise is there