Home | Projects | Tutorials | Articles | live chat | Submit Project | Big Vote
 
Ajax Projects
.NET Frameworks
Java Frameworks
PHP Frameworks
Ruby Frameworks
Other Frameworks
Cool AJAX sites
Ajax Resources
Ajax Tools
JavaScript frameworks
Partners

 Home /  Tutorials / How to implement a JQuery AJAX Login Form into a Modal Box

How to implement a JQuery AJAX Login Form into a Modal Box





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.

Read The Full Tutorial.
































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:
view plaincopy to clipboardprint?

   1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
   2. <html> 
   3. <head> 
   4. <title>Modal Ajax Login Form</title> 
   5.  
   6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script
   7.  
   8. <script type="text/javascript" src="javascript/jquery.simplemodal.js"></script> 
   9. <script type="text/javascript" src="javascript/init.js"></script> 
  10.  
  11. <link type='text/css' href='style/stylesheet.css' rel='stylesheet' media='screen' /> 
  12.  
  13. <link type='text/css' href='style/basic.css' rel='stylesheet' media='screen' /> 
  14.  
  15. </head> 
  16.  
  17. <body> 
  18.  
  19. Click the login link to launch the modal box:<br /> 
  20.  
  21. <span style="font-size: 15px;"> 
  22. <a id="login_link" href="#">LOGIN</a> | MEMBERS AREA</a> 
  23.  
  24. </span> 
  25.  
  26. <div id="login_form" style='display:none'> 
  27.  
  28. <div id="status" align="left" style="margin-top: 20px; width: 310px;"> 
  29.  
  30. <center><h1><img src="images/key.png" align="absmiddle">&nbsp;LOGIN</h1> 
  31.  
  32. <div id="login_response"><!-- spanner --></div> </center> 
  33.  
  34. <form id="login" action="javascript:alert('success!');"> 
  35. <input type="hidden" name="action" value="user_login"> 
  36. <input type="hidden" name="module" value="login"> 
  37.  
  38. <label>E-Mail</label><input type="text" name="email"><br /> 
  39. <label>Password</label><input type="password" name="password"><br />   
  40.  
  41. <label>&nbsp;</label><input value="Login" name="Login" id="submit" class="big" type="submit" /> 
  42.  
  43. <div id="ajax_loading"> 
  44. <img align="absmiddle" src="images/spinner.gif">&nbsp;Processing... 
  45. </div> 
  46.  
  47. </form> 
  48.  
  49.  </div> 
  50.  
  51. </div> 
  52.  
  53. </body> 
  54. </html> 

<!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">&nbsp;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>&nbsp;</label><input value="Login" name="Login" id="submit" class="big" type="submit" />

<div id="ajax_loading">
<img align="absmiddle" src="images/spinner.gif">&nbsp;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):
view plaincopy to clipboardprint?

   1. // Preload Images 
   2. img1 = new Image(16, 16); 
   3. img1.src="images/spinner.gif"; 
   4.  
   5. img2 = new Image(220, 19); 
   6. img2.src="images/ajax-loader.gif"; 
   7.  
   8. // When DOM is ready 
   9. $(document).ready(function(){ 
  10.  
  11. // Launch MODAL BOX if the Login Link is clicked 
  12. $("#login_link").click(function(){ 
  13. $('#login_form').modal(); 
  14. }); 
  15.  
  16. // When the form is submitted 
  17. $("#status > form").submit(function(){   
  18.  
  19. // Hide 'Submit' Button 
  20. $('#submit').hide(); 
  21.  
  22. // Show Gif Spinning Rotator 
  23. $('#ajax_loading').show(); 
  24.  
  25. // 'this' refers to the current submitted form 
  26. var str = $(this).serialize();   
  27.  
  28. // -- Start AJAX Call -- 
  29.  
  30. $.ajax({ 
  31.     type: "POST", 
  32.     url: "do-login.php",  // Send the login info to this page 
  33.     data: str, 
  34.     success: function(msg){   
  35.  
  36. $("#status").ajaxComplete(function(event, request, settings){   
  37.  
  38.  // Show 'Submit' Button 
  39. $('#submit').show(); 
  40.  
  41. // Hide Gif Spinning Rotator 
  42. $('#ajax_loading').hide();   
  43.  
  44.  if(msg == 'OK') // LOGIN OK? 
  45.  { 
  46.  var login_response = '<div id="logged_in">' + 
  47. '<div style="width: 350px; float: left; margin-left: 70px;">' + 
  48. '<div style="width: 40px; float: left;">' + 
  49. '<img style="margin: 10px 0px 10px 0px;" align="absmiddle" src="images/ajax-loader.gif">' + 
  50. '</div>' + 
  51. '<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+ 
  52. "You are successfully logged in! <br /> Please wait while you're redirected...</div></div>"; 
  53.  
  54. $('a.modalCloseImg').hide();   
  55.  
  56. $('#simplemodal-container').css("width","500px"); 
  57. $('#simplemodal-container').css("height","120px"); 
  58.  
  59.  $(this).html(login_response); // Refers to 'status' 
  60.  
  61. // After 3 seconds redirect the 
  62. setTimeout('go_to_private_page()', 3000); 
  63.  } 
  64.  else // ERROR? 
  65.  { 
  66.  var login_response = msg; 
  67.  $('#login_response').html(login_response); 
  68.  }   
  69.  
  70.  });   
  71.  
  72.  }   
  73.  
  74.   });   
  75.  
  76. // -- End AJAX Call -- 
  77.  
  78. return false; 
  79.  
  80. }); // end submit event 
  81.  
  82. }); 
  83.  
  84. function go_to_private_page() 
  85. { 
  86. window.location = 'private.php'; // Members Area 
  87. } 

// 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:
view plaincopy to clipboardprint?

   1. // Preload Images 
   2. img1 = new Image(16, 16); 
   3. img1.src="images/spinner.gif"; 
   4.  
   5. img2 = new Image(220, 19); 
   6. img2.src="images/ajax-loader.gif"; 

// 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:
view plaincopy to clipboardprint?

   1. // Launch MODAL BOX if the Login Link is clicked 
   2. $("#login_link").click(function(){ 
   3. $('#login_form').modal(); 
   4. }); 

// 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:
view plaincopy to clipboardprint?

   1. // When the form is submitted 
   2. $("#status > form").submit(function(){   
   3.  
   4. // Hide 'Submit' Button 
   5. $('#submit').hide(); 
   6.  
   7. // Show Gif Spinning Rotator 
   8. $('#ajax_loading').show(); 
   9.  
  10. // .................. 
  11. }); 

// 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:
view plaincopy to clipboardprint?

   1. // 'this' refers to the current submitted form 
   2. var str = $(this).serialize();   

// '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:
view plaincopy to clipboardprint?

   1.  var login_response = '<div id="logged_in">' + 
   2. '<div style="width: 350px; float: left; margin-left: 70px;">' + 
   3. '<div style="width: 40px; float: left;">' + 
   4. '<img style="margin: 10px 0px 10px 0px;" align="absmiddle" src="images/ajax-loader.gif">' + 
   5. '</div>' + 
   6. '<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+ 
   7. "You are successfully logged in! <br /> Please wait while you're redirected...</div></div>"; 
   8.  
   9. $('a.modalCloseImg').hide();   
  10.  
  11. $('#simplemodal-container').css("width","500px"); 
  12. $('#simplemodal-container').css("height","120px"); 
  13.  
  14.  $(this).html(login_response); // Refers to 'status' 
  15.  
  16. // After 3 seconds redirect the 
  17. setTimeout('go_to_private_page()', 3000); 

 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).
view plaincopy to clipboardprint?

   1. var login_response = msg; 
   2.  $('#login_response').html(login_response); 

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.

Download

View Demo

source: bitrepository

Says:
Sat May 16, 2009 10:59 am
excellent
Says:
Sat May 16, 2009 11:00 am
nice article very useful.....For Reference....http://jquery.com
Says:
Mon May 18, 2009 4:49 am
Kolorowanki Says:
Sun Jun 28, 2009 10:18 pm
jquery rooles!
Good stuf!
M.K.
Odchudzanie Says:
Fri Jul 03, 2009 10:11 pm
Nice tutorial! Cheers for the share!
Says:
Tue Aug 18, 2009 12:12 pm
Says:
Fri Aug 21, 2009 12:29 pm
Says:
Mon Sep 14, 2009 9:16 am
neon tabela Says:
Thu Oct 22, 2009 5:03 pm
Everything is very open and very clear explanation of issues. was truly information. Your website is very useful. Thanks for sharing.
Says:
Sun Oct 25, 2009 7:24 pm
Says:
Mon Oct 26, 2009 3:33 pm
Says:
Mon Nov 02, 2009 3:08 pm
Says:
Mon Nov 23, 2009 1:16 pm
Prashant Says:
Mon Nov 23, 2009 1:16 pm
Hello let me test
Says:
Thu Nov 26, 2009 12:45 pm
Says:
Sat Jan 16, 2010 9:49 pm
Says:
Fri Jan 22, 2010 10:53 am
juvenile justice degree Says:
Sat Jan 23, 2010 7:39 am
This registers our CallServer function on the page. We are essentially passing the selected item of the Dropdown list to the CallServer function if you see the source code of the output page the CallServer function will appear as follows:online
logistics management degree Says:
Sat Jan 23, 2010 7:39 am
All shades of asparagus taste special in their own way
network management degree Says:
Sat Jan 23, 2010 7:40 am
It tends to turn green when cooked, so it is better used tender and fresh, thinly sliced in salad
nursing degree Says:
Sat Jan 23, 2010 7:40 am
it a pea-like flavour. Purple and red asparagus is also popular with keen gardeners and allotment holders.
nutritional and health sciences degree Says:
Sat Jan 23, 2010 7:41 am
This type of asparagus tastes a lot like salsify. In company with the Spanish, we prefer our asparagus green and grown in full light, which gives

Leave Your Comment

Name (Required)
Mail (will not be published) (required)
Website
AddThis Social Bookmark Button
Top Projects
MSN Web Messenger
MessengerFX
ebuddy
e-messenger
ILoveIM
AJAX file upload
You Tube
KoolIM.com
Meebo
Ajax.NET Professional
Tutorials
Cross Domain Ajax using CSSHttpRequest
Style missing from AjaxToolkit Tab Container
Slider Using PHP, Ajax And Javascript
AJAX & PHP star rating system script
Using HTTP Status Codes for Rails AJAX Error Handling
JavaScript 2 evolution and the myth busting Tracing JIT
Intro to WCF for Ajax
CSS Border Radius
AutoCompleteExtender TextBox CompletionList Width Ajax ASP.NET
JSON services in ASP.NET Ajax