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

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

Saving Your Comment

Leave Your Comment


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


	Copyrights Reserved AjaxProjects.com 2006-2008, Developed by IRange - Privacy Policy