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.

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"> LOGIN</h1>
31.
32. <div id="login_response"></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> </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"> 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>

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

<center><h1><img src="images/key.png" align="absmiddle"> LOGIN</h1>

<label>E-Mail</label><input type="text" name="email"><br />
<label>Password</label><input type="password" name="password"><br />

<div id="ajax_loading">
<img align="absmiddle" src="images/spinner.gif"> Processing...
</div>

</form>

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