Do you need to integrate an AJAX Login Form into a Modal Box? This tutorial will show you how you can do that using the powerful library jQuery. The modal box that I’ve chosen is a jQuery Plugin written by Eric Martin.
Let’s start making the html file where the modal box is triggered:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Modal Ajax Login Form</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="javascript/jquery.simplemodal.js"></script> <script type="text/javascript" src="javascript/init.js"></script> <link type='text/css' href='style/stylesheet.css' rel='stylesheet' media='screen' /> <link type='text/css' href='style/basic.css' rel='stylesheet' media='screen' /> </head> <body> Click the login link to launch the modal box:<br /> <span style="font-size: 15px;"> <a id="login_link" href="#">LOGIN</a> | MEMBERS AREA</a> </span> <div id="login_form" style='display:none'> <div id="status" align="left" style="margin-top: 20px; width: 310px;"> <center><h1><img src="images/key.png" align="absmiddle"> LOGIN</h1> <div id="login_response"><!-- spanner --></div> </center> <form id="login" action="javascript:alert('success!');"> <input type="hidden" name="action" value="user_login"> <input type="hidden" name="module" value="login"> <label>E-Mail</label><input type="text" name="email"><br /> <label>Password</label><input type="password" name="password"><br /> <label> </label><input value="Login" name="Login" id="submit" class="big" type="submit" /> <div id="ajax_loading"> <img align="absmiddle" src="images/spinner.gif"> Processing... </div> </form> </div> </div> </body> </html>
In the HEAD part of the page I’ve included the JQuery library, the modal box and the AJAX Login script. When the “LOGIN” link is clicked (id=”login_link”) the modal box is triggered and the login form is shown (initially it’s hidden).
Here’s the content of init.js (I will explain you how it works below):
// Preload Images img1 = new Image(16, 16); img1.src="images/spinner.gif"; img2 = new Image(220, 19); img2.src="images/ajax-loader.gif"; // When DOM is ready $(document).ready(function(){ // Launch MODAL BOX if the Login Link is clicked $("#login_link").click(function(){ $('#login_form').modal(); }); // When the form is submitted $("#status > form").submit(function(){ // Hide 'Submit' Button $('#submit').hide(); // Show Gif Spinning Rotator $('#ajax_loading').show(); // 'this' refers to the current submitted form var str = $(this).serialize(); // -- Start AJAX Call -- $.ajax({ type: "POST", url: "do-login.php", // Send the login info to this page data: str, success: function(msg){ $("#status").ajaxComplete(function(event, request, settings){ // Show 'Submit' Button $('#submit').show(); // Hide Gif Spinning Rotator $('#ajax_loading').hide(); if(msg == 'OK') // LOGIN OK? { var login_response = '<div id="logged_in">' + '<div style="width: 350px; float: left; margin-left: 70px;">' + '<div style="width: 40px; float: left;">' + '<img style="margin: 10px 0px 10px 0px;" align="absmiddle" src="images/ajax-loader.gif">' + '</div>' + '<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+ "You are successfully logged in! <br /> Please wait while you're redirected...</div></div>"; $('a.modalCloseImg').hide(); $('#simplemodal-container').css("width","500px"); $('#simplemodal-container').css("height","120px"); $(this).html(login_response); // Refers to 'status' // After 3 seconds redirect the setTimeout('go_to_private_page()', 3000); } else // ERROR? { var login_response = msg; $('#login_response').html(login_response); } }); } }); // -- End AJAX Call -- return false; }); // end submit event }); function go_to_private_page() { window.location = 'private.php'; // Members Area }
First, the GIFs are preloaded. This way they will load instantly when it’s the case:
// Preload Images img1 = new Image(16, 16); img1.src="images/spinner.gif"; img2 = new Image(220, 19); img2.src="images/ajax-loader.gif";
When DOM is ready (all page elements are loaded, including graphics) the Modal Box is launched when the user clicks on the “Login” link:
// Launch MODAL BOX if the Login Link is clicked $("#login_link").click(function(){ $('#login_form').modal(); });
When the form is submitted, the “Submit” button is hidden and the GIF spinning rotator/loader is shown:
// When the form is submitted $("#status > form").submit(function(){ // Hide 'Submit' Button $('#submit').hide(); // Show Gif Spinning Rotator $('#ajax_loading').show(); // .................. });
The form data is serialized:
// 'this' refers to the current submitted form var str = $(this).serialize();
Further on, the data is sent to “do-login.php” using AJAX. If ‘OK’ is returned then a confirmation message will be shown to the user before redirecting him to the private page. Notice how I used jQuery’s css(name, value) function to change the width and height of the modal box:
var login_response = '<div id="logged_in">' + '<div style="width: 350px; float: left; margin-left: 70px;">' + '<div style="width: 40px; float: left;">' + '<img style="margin: 10px 0px 10px 0px;" align="absmiddle" src="images/ajax-loader.gif">' + '</div>' + '<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+ "You are successfully logged in! <br /> Please wait while you're redirected...</div></div>"; $('a.modalCloseImg').hide(); $('#simplemodal-container').css("width","500px"); $('#simplemodal-container').css("height","120px"); $(this).html(login_response); // Refers to 'status' // After 3 seconds redirect the setTimeout('go_to_private_page()', 3000);
If there are errors (incorrect login) they will be shown above the form (“login_response” DIV).
var login_response = msg; $('#login_response').html(login_response);
The design is fully customizable using CSS. Consider downloading the ZIP archive which contains all the files you need.
DEMO
– – – – – – – – – – – – – – – – –
E-Mail: demo@demo.com
Password: demo123
– – – – – – – – – – – – – – – – –
UPDATE: Thank you all for reporting the bugs within the download archive. I made the corrections and now there shouldn’t be any confusion about it. I hope most of the people figured out the issues and corrected them.