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"><!-- 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> </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>
<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):
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
|
Ajax Projects
