Reader
  • Home
  • About
  • Deals
  • Services
  • Contact

How to Implement a jQuery AJAX Login Form into a Modal Box

Last updated on March 24th, 2015 by Gabriel Livan

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.

Modal Login Boxes

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">&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):

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

UPDATE: I’ve written this post a long time ago when I had the habit of using HTML code inside JavaScript variables. I realised, in time, that this is not such a good practice and it should be used only in special situations. If you can, try to keep “login_response” as clean as possible without much DIVs inside it.

DEMO
– – – – – – – – – – – – – – – – –
E-Mail: [email protected]
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.

Download   View Demo

Filed Under: AJAX, JavaScript Tagged With: ajax login, modal box

About Me

Gabriel LivanHey, there! I'm Gabriel Livan, Web Developer, Blogger and Internet Marketer. I love making fast, secure and scalable web applications, running and travelling around the world. I blog about WordPress, site speed & security and quality tools for web professionals. Read more

What are you looking for?

Categories

  • AJAX (22)
  • Deals (10)
  • Design (30)
  • eBooks (2)
  • Flash (19)
  • Freebies (11)
  • General (62)
  • Giveaways (1)
  • Graphics (27)
  • HTML & CSS (35)
    • Frameworks (9)
  • JavaScript (160)
    • Frameworks (8)
    • jQuery (89)
    • MooTools (14)
  • Page Loading Speed (2)
  • Photoshop (3)
  • PHP (113)
  • Reviews (8)
  • SEO (6)
  • Statistics (2)
  • Web Tools (13)
  • WordPress (27)
    • Plugins (15)
    • Snippets (4)
    • Tools (2)
    • Tutorials (6)

Copyright © 2021 · BitRepository.com - All Rights Reserved

  • Home
  • About
  • Contact