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:
<!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):
// 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.
DEMO
– – – – – – – – – – – – – – – – -
E-Mail: demo@demo.com
Password: demo123
– – – – – – – – – – – – – – – – -
Nice write-up Gabriel! Thanks for using SimpleModal – I’ll be sure to pass this along to other jQuery/SimpleModal users!
Nice post. One thing to add, though, is that you should always set the href attribute to an actual login page (as in href=”login.php” instead of “href=#”) in case the user doesn’t have JavaScript activated, or the login function would be rendered useless.
I know that this may have not been done in the demo for practical purposes, but it’s worth noting, IMO.
Regards,
Gonzalo
nice work gabriel, most modal logins i’ve seen don’t use ajax to check login details, which isn’t great. i’m going to use this one- thanks!
rob ganly
Thanks for the useful info. It’s so interesting
How do I modify this form action to work as a login modal for wordpress. I feel like that would be a huge traffic driver if you wrote an addon tutorial to make a wordpress modal login box. I have wanted to implement that for a long time but have no ajax skills. Thanks.
@Leland: To do this you have to study the WordPress Login process. Your idea is quite good and I will think about implementing the WP Login in a Modal Box.
Hi Gabriel,
Any news with implementing the WP Login in a Modal Box?
thanks
I have recently written a post about a WordPress Plugin that you may find interesting: http://bit.ly/8TiEV2
You have no idea how long I was waiting for something like this.
Could never achieve such a great script. I tried…
Thanks mate
I’m new to jQuery/js, can I make multiple links in the same page trigger that function?
Never mind, did some looking and figured it out…awesome.
I would love to see this incorporated into wordpress. I’m looking for a way of having a modal box or something similar used for a login for a clients area I’m trying to setup.
Can you please suggest examples using ASP .net instead of PHP itried to search a lot in net but recieved faiure to get the same jo as you did in PHP. Please help me to know how the same functiionality is achieved in asp .net
Pretty well thanks for this.
Hi,
Nice. But i don’t want the Modal Box launched when the user clicks on the “Login” link, i want it launched when the page loaded.
Can anyone teach me how to do that?
Or what should i edit this line:
$(“#login_link”).click(function(){
$(‘#login_form’).modal();
});
Thanks…
You should just remove the first and the last line:
replace
$(‘#login_link’).click(function(){
$(‘#login_form’).modal();
});
with
$(‘#login_form’).modal();
Hello Gabriel,
Thanks a lot! It works. But i don’t want show the login form as soon as the page loaded, i want to show the login form after 10 seconds. Can you teach me how?
Thanks…
Rex
Replace the following line:
$(’#login_form’).modal();
with:
setTimeout(“$(‘#login_form’).modal();”, 10000);
Note: The timeout value is set in milliseconds. So, if you want to wait 5 seconds until the modal login launches just set the value to 5000.
Hello Gabriel,
Thanks….. It works Perfect!!!
Many thanks….
God Bless…
Rex
Thankyou, This is fantastic, thanks fro the great work!
Hello Gabriel,
I have a problem here. I removed the close button(X) at the upper left of my form, because i don’t want my users to see the content before they log in.
I want the model window to close after they enter the correct password. I don’t want to redirect them to the private page.
I try my best to edit the code below but cannot works. So i hope you can help. Thanks.
In init.js, I just replace:
setTimeout(‘go_to_private_page()’, 3000);
to
setTimeout(“$(‘a.modalCloseImg’).hide();”, 3000);
Or replace here like:
function go_to_private_page()
{
window.location = ‘private.php';
}
to
function go_to_private_page()
{
?
}
Thanks,
Good day!
Rex
hi
i have problem, cannot redirect to private page
please help
Thanks for great work. I’m using this in one of my project……
Hi, I tried the login, it seems to break in FF3.5, but works fine in IE8. Is there a bug?
Hi,
not file login.php Error redirect! Please help.
why do you need this:
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
in the code?
Can this box be done without having an external js link for it to work?
Tuba,
Yes, it can be done using local js libraries (by uploading it to your server). The external, Google-hosted library is used to get advantage of caching. You see, if someone has already visited a site which used the js from Google, it will be cached and it’s one less file to be downloading, improving download times and perceived speed by the user.
Hello Gabriel,
Thanks you sooo much for this post. This is is great.
This is (almost) exactly what I was looking for.
Here is my case:
here is what I have now:
default.aspx
login.aspx
privatepage.aspx
from default.aspx when a user clicks on privatepage.aspx, he/she gets redirected to login.aspx?page=privatepage.aspx
then when the user enters the correct credentials, he/she gets redirected to privatepage.aspx
I will need to replace $(‘#login_link’).click(function(){
$(‘#login_form’).modal();
});
with
$(‘#login_form’).modal();
but my question is where should I put this code? in privatepage? or in login.aspx?
I don’t (of course) want to have users see privatepage.aspx before they login.
Also, the login page uses a usercontrol that sets the session objects (fname, lname, etc.)
Please advise.
Thanks
Just leave the code in init.js. Include the JavaScript file only in the login.aspx page.
the PHP for the donload won’t work
i had to make a whole host of changes
a) the index.html should be login.php
b) the variable anme in the PHP scripts should be set to the same not differnt variables on each page
can someone check it and fix it please
Nice plugin but I have a small problem.
on my local xampp it works very well.
but if I uploaded it to my webspace the window.location redirect doesn’t work.
pls explain some workings of simplemodal.js
hello Gabriel,
Session is not set in the private.php
Welcome, | Logout
This is your private page. You can put specific content here.
Note after Welcome,the username does not appear…
I`l be kind enough if u reply
The session is set in config.php. This file is included in private.php.
To fix the username bug just edit line 26 from do-login.php: change $username to $post_email (the username is actually the e-mail address in this case)
The purpose of the tutorial is to show a working ajax login from inside a modal box. If you want to integrate it on your website, the PHP files from the ZIP package need some changes though. They were added just for demo purpose.
I’m having a hard time making this work with asp pages (pre asp.net). What is the trick to send the form data? I try changing the php page to the asp equivalent using
request.Form(“password”)
instead of
$_POST[‘password’]
for example, but it’s not working. Any suggestions on where I can look for help on this?
Thanks! I love your code otherwise – it’s exactly what I’ve been looking for.
I am have a similar example but no login, but does post data in a similar way on a floating modal box.
I am trying to retrieve json output, it doesn’t seem to work. On Firebug console something like $(‘#someid’).html(data.output); works.
Any help?
Hello,
Gabriel great script thanks for sharing.
Question, How can I go about configuring the PHP array? Right now the email and password are hard coded, which is fine but how do I add more email and passwords to the $config array?
Thank you,
v/r
JShidell
Hi, This is a great script, been searching for something like this for a long time.
I am looking to add this function on a new website I am developing, however, I have used Jquery Fancybox for the modal window. Is this script compatible with Fancybox?
Thanks
If you use the latest version of simplemodal you can use a strict dtd instead of the transitional.
http://www.ericmmartin.com/projects/simplemodal/
Como hago para colgarlo en una web real, que cambios debo hacerle? Porque anda barbaro local en xampp pero lo cuelgo en la web y no pasa del login.
I found this and thought it’s great, thanks.
I am currently testing it and I think there are a couple of glitches in the examples downloaded with the zip.
-The php scripts use “isSet” instead of “isset” and breaks for me, had to change it.
-The cookies are not being set, it fails cheking the post “remember_me”, the index.html is not sending any “remember_me” value. All the cookie use would need further modifications to work, $usr and $hash are never set to compare, but I know it wasn’t the point in the example to learn.
-All the ‘username’ checks when failed redirect to login.php but there is no login.php there; logout.php too, leading to 404 error should be index.html.
-In do-login.php username is given the value of variable $username, although $username is never given any value, this leads to failing login everytime.
-Failing login redirects to login.php
Hope this helps others that found this not working, happened to me, and correct me if i’m wrong.
It works perfect in the view demo link though.
Cheers for the heads up on this! I was wondering what I a was missing here.
Gabriel, it would be great if you can change the download to be the working demo version, just to save a bit of time. Anyways a BIG thanks for showing me the ropes with this!
Hello,
Gabriel great script thanks for sharing.
when i click submit() form, the success alert show, what’s the problem!
That success alert is just a dummy action. It could have been no action set since the data is sent to the PHP page through AJAX. It appears if the script isn’t setup correctly. Make sure you have the right paths to the JavaScript files, and the right ID is set for the link that is clicked (see the tutorial in detail).
if i change table id into any other “id” this modal box not working??
Hi,Gabriel…
why this is not working in FF 3.5.9 ?
Hi, thanks for such a great script.
However, i have placed the “Login” link in a php loop that prints few rows from the database, and i want the modal box to appear when i click on link in each row.
So far, i could not figure out how to achieve multiple modal boxes, but as Zomb said, he has figured it out, it would be great if someone helps me here
Yes, i think i have figured it out….
you need to write another link for opening up the modal box, like:
<a id="login_link2……
<a id="login_link3……
And in the init.js file, you need to add:
$("#login_link2").click(function(){
$('#login_form').modal();
});
$("#login_link3").click(function(){
$('#login_form').modal();
});
………
Hope iam right….
Or use classes instead of ids. I just used changed to <a class="login_link" and in the init.js file $("login_link").click(function() {… and it seemed to do the trick!
Hi,
I have implement this. When successfully logged in then not redirect to private.php… It just echo OK… I have not implemented cookie.
thanks
I came across your code snippets from google..I tried the code, and the submission works great-problem is..the password field when serialized is visible through firebug…Its actually not a grave problem..because even with a form post, the same request can be intercepted and the form contents can be checked..
How works it in asp.net?
Good post. Thank you
In case the form has more fields, instead of defining width height manually in CSS, can we have the Login box take the maximum height or auto height may be?
Login box is not launch in IE 8.
whats the problem?
my code is on below link :
http://www.kbcsystems.net/Project/esol/index.php
plz help
I would like to implement this on a site I’m building for a friend. They want to be able to log into a third party site that manages their inventory. They have dozens of user ids, so putting the login credentials in so-login.php won’t work. If this were a simple html form, I’d just set the action to the appropriate cgi login path and their server takes care of the login authorization. Is that possible with your login modal…to simply direct the action to third party log in?
not file login.php Error redirect! PLEASE HELP
Hi this is a great thing but it does not launch in IE8, works fine in Firefox and Chrome but IE8 it does not launch, please help?
between the head tags:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
here is the postable version of the line above..
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
this should help
It`s the best modal login box i have ever seen but I don`t know how to modify the email…
fine tutorial!
it works great! if u check other tutorials, you can finde online, you go crazy! some of them are really bad und impossible to understand.
but what about security issue? how secure is such a ajax/jquery login?
kudos to the great job. Thanks, this is pretty helpful.
Hi Alex, It still does not want to work in IE8 dude, I added that to my header but it made no difference.
Great help!
I’ll use it in one of my projects.
Thank you!
You rox man !
Very helpful for beginner
Thanks !
I use:
in top of code and not work Modal!
if i change it for:
Not Work my Page
How i do?
How i do it work in xhtml?
Will this work for a secure login? DO modals and pop ups defer from having a secure login? Is it worth it to redirect to a new sign in page rather than doing this method for security reasons?
Great tutorial., i will use it for my next project.
thanks
Great tutorial., i will use it for my next project.
thanks.
Very nice form… I want to this one for my website. Thx you so much,….
Very nice !!! save 1000 hrs of stomp my head on a wall, eheh
Hi Gabriel,
Great work!
I have a small problem. When user clicks on X (close) image button – i wan’t the page to be redirected to home page. How can i set the close button to redirect to home page instead of just hiding the modal login box.
Thanks
I really like the idea behind Modal window and i know how its useful.
But all Modal Window and other similarity are triggered after CLICK event. I have to click on SPECIFIC ID to get Modal Window shows up.
What i’m looking for to have simple Modal Window build by jQuery and it get triggered when user select any text from web page (plain text from P or SPAN tag). And when Modal Window open up it has some data or links or some tabs inside that Modal Window each tab has its own data such as forms or links, images, audio, video, ….etc
I hope i’m clear and explained myself enough. Im still new to jQuery and searching a lot for such solution or close solution to my idea, but i cant.
I’ll be so grateful of you can guide me or show how and where to start. Or is it really possible to that.
Thanks a lot
Ahmed
Hey I love this thing, but I’m having some issues with the declaration in MSIE. It seems that if I use a standard doctype, like just , the jquery modal script breaks. Is there some fix to the jquery function I can apply so I can use normal doctypes with this thing?
Great, great login! After banging my head and searching for days, I can’t seem to figure out why the validation will not carry all the way through and therefore I am being redirected back to the login page. My backend programming is weak, but I have found that it may be an issue w/ the session or cookie….could someone please post the fix for this? Thank you!
I have a problem. After login this is redirect to login.php that doesn’t exists. I saw in the code that is caused because this line in do-login.php:
$_SESSION[‘username’] = $username;
The variable $username has no value.
in archive missing file: login.php
Hi, in this archive: http://www.box.net/shared/5ij68klazs, missing file: login.php
You can send it to me? otherwise form does not work(((. Thanks in advance!
mov260891@yandex.ua
There is a problem with the downloadable demo.
You can fix it by changing the line
$_SESSION[‘username’] = $username;
in do-login.php…. to
$_SESSION[‘username’] = $post_email;
the problem was that $username was not being set, so in private.php all users were redirected back to index.html
Thanks alot for your script. It has really help me. I however have a challenge passing a variable from php to the init.js file. This is just what i want to accomplish
function go_to_private_page()
{
window.location = ‘main.php?test=(a php variable HERE)';
}
Please help me out.
Regards
Very nice! I’m using modal box with this nice instant ajax login, works fine for me, http://www.devstring.com/jlogin, maybe it would help