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

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

  1. Hi! The ajax-login-form.zip is faulty, it can't be unzipped. Could you mail me a working zip? Thank's, Yours, Matthias

  2. 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.

  3. 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?

  4. 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.

  5. 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 ?

  6. 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

  7. it was worked good in IE but not in forefox

    what is the mistake in that

    thank you

    1. I’ve just tested the Ajax Login in FireFox and it works fine. Perhaps you are using an older version of FireFox (under 2).

  8. i want to multi user login

  9. 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. 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.

  10. 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. :) 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.

  11. 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!!

  12. Hi,

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

    Cheers, Lea!

  13. 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?

  14. 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. it doesnt work

  15. Wow Its working 100%

  16. Good work thanks for this job…..

  17. [...] 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 [...]

  18. 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

  19. awesome, Thanks great I have done some improvements too to suite my security requirements. It works nice. Thanks you very much.

  20. [...] This is a sweet Ajax login form tutorial that uses MooTools. Plus the login form has a neat little preloader! View Tutorial [...]

  21. 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/

  22. Anyone know how I can change this from php to asp?

  23. 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. I believe you didn’t setup the script correctly on your web host server. Can you share the URL to the login form?

  24. I really tried to intagrade sql database but counldn’t do it please some help me

  25. I can’t combine with MySQL. Please rewrite the code that can connect with MySQL. thanks in advance.

  26. After several test i get manage to connect with MySQL database. Thank you for your script.

  27. nice work, i have just used that script and comes out good for me. thanks

  28. Could someone explain how to modify this for multiple user logins using MySQL?

  29. How come this login form doesn’t trigger the browser built-in function – “remember password”?

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.