Coding an Instant Login Form with jQuery and PHP/Ajax

by Jake Rocheleau

on August 31, 2011

in Tutorials

Login forms have been around for decades. In web design these are very common with so many social media interactions occurring on a daily basis. However the static web has gone by the wayside to make room for much more dynamic content. With popularity growing for the jQuery library it is only natural to see so many new effects being created.

In this brief tutorial I’m going to explain how to create an instant login form with jQuery and PHP. We won’t be accessing any database to keep things simplified for now. Instead I’ve hard coded a username/password combo just for the demonstration of this article. The form automatically begins checking after you type some information to see when you hit the correct user & password combination!

If you’d like to get a better idea check out the demo link below. I’ve also provided my source code free to download. The HTML web page will open and run jQuery properly but without a server running PHP the form cannot be processed. Keep this in mind when playing around with the source code.

Demo of Instant Login Form

Sorting out the HTML

Let’s start out by examining the basic page HTML setup. I won’t cover the entire layout since this is really beginners stuff. But we’re using an HTML5 doctype in the header with an external stylesheet resource. I’ve also added the latest jQuery 1.6.2 minified library from Google code servers.

Our main content is held within a div using the ID of #c. This content div will center our page form and give a light background compared to the body. Inside we have a heading and loader div to display the ajax loading button when processing the form values. Also beneath the form is a results div to output information upon successful login.

[cc lang="html"]

Instant Login with jQuery/Ajax

loading…

username: admin / password: password1

[/cc]

This covers a lot of the basics to look at. I’ll be jumping right into the jQuery code so we can really get into the juicy stuff! One last design topic to mention is the icon we’ve used to signify a successful login. It’s a typical style of Things icon design to feature a glowing box containing a check mark.

Dynamic Coding in jQuery

To keep things easy I’ve included all of the jQuery code directly into the same page as our HTML demo. Within the source files you’ll find 2 core pieces – index.html for frontend UI and login.php for processing the form details. The PHP code is beyond simplistic, so don’t worry if you’re fairly new to the language.

But to begin with scripting let’s examine our jQuery clause below. This is included within a script tag directly before my closing body element. At first we check if the document has finished loading to prepare for processing DOM elements. I’ve initially hidden the #loader div so nothing is displayed until later on.

[cc lang="javascript"]$(document).ready(function() {
$(“#loader”).hide();
[/cc]

From here we’ll be working within a single event handler function. Whenever the user releases a key on the keyboard (.keyup) we want to check out a whole list of functionality. jQuery is great at building such nested functions in very few lines of code!

[cc lang="javascript"]$(“#pw, #username”).keyup(function(){
var passnum = $(“#pw”).val();
var usernum = $(“#username”).val();
[/cc]

You’ll notice we are using two selectors inside this jQuery event handler call. Whenever the user releases a key on either input field we need to call a fairly large function. Immediately we set 2 variables passnum and usernum which hold the value of the password and username input, respectively. We’ll need this in the next segment to check if the values are correct.

Handling Form Input

We should now examine the whole jQuery block of code for processing the form data. This is rather lengthy so I’ve chosen to break it further into two parts. I do recommend downloading the source code instead of copying/pasting from the article so you don’t get lost!

[cc lang="javascript"]if(passnum.length > 1 && usernum.length > 2) {
var qry = ‘username=’+ $(“#username”).val() + ‘&pw=’ + passnum;

if($(“#loader”).attr(“class”) != “loading”) {
$(“#loader”).addClass(“loading”);
$(“#loader”).show();
}
[/cc]

We begin with a simple if/else clause to check if the input username is longer than 1 character and the input password is longer than 2. If this is true then we can assume the visitor has entered values into both fields and we should begin checking their credentials. We’ve put together a new variable named qry which stores the query string for our upcoming PHP/Ajax call.

This basically passes the current username and password value directly to the login.php form so we can see if they are correct. For aesthetics we also check if the #loader div has a class of loading. If not then we know it hasn’t been activated yet, so we apply the class and show the loading image. In this case I’ve used Ajax Loader to create a Facebook-style .gif animation. Now let’s examine the code for our ajax call.

[cc lang="javascript"]$.ajax({
type: “POST”,
url: “login.php”,
data: qry,
success: function(html) {
if(html == ‘good’) {
$(“#loader”).hide();
$(“#instantform”).fadeOut(1100, ‘swing’)
$(“#instantform”).next(“p”).fadeOut(1100, function(){
$(“#results”).append(‘

Success! Logged in as ‘+usernum+’!!’);
});

$(“#loader > img”).attr(“src”, “img/checkmark.png”);
$(“#loader”).fadeIn(800);
}
else {
// handling errors if needed
}
}
});
[/cc]

jQuery has made things a lot simpler with a specific .ajax() method and parameters to boot. I’ve setup standard values using a POST format so the data isn’t streamed as $_GET variables. If we get a successful ajax connection I’ve added a new function() as the callback method and passed in the response html from the login.php file.

The PHP backend is hard coded to display the message ‘good’ if we have a successful login. This will activate the first clause in our if/else function which hides the loader panel and begins a .fadeOut() function on our form. Remember that all of this processing is happening with every keystroke, but we only access this functionality if the Ajax response is good (when the user provides proper credentials).

Demo PHP Formatting

There are a few other neat effects I’ve created with the jQuery callback function that I won’t go into further detail. They are fairly straightforward to understand if you know about jQuery selector syntax. Note when we get a failed login I haven’t added anything, just a comment to fill the void.

Now let’s swap over and examine the very last piece of this puzzle! In my login.php file I’ve only added the bare minimum amount of code we need to process this form. We check if there are $_POST variables set and if true assign the username and password values to $u and $p.

[cc lang="php"]if($_POST) {
$u = $_POST['username'];
$p = $_POST['pw'];

if($u == “admin” && $p == “password1″) {
echo “good”;
}

else {
// possible error handling in php
// not required for all
}
}
[/cc]

I’ve done nothing fancy to check for login credentials. Just a simple if/else clause to matchup the username and password string values. Certainly not the safest method but there are plenty of tutorials on securing PHP login data. If PHP gets a matchup we echo (or return) good to the jQuery call. Otherwise we get nothing in return.

Demo of Instant Login Form

Conclusion

This introductory tutorial was aimed to grow your knowledge of jQuery programming. If you understand PHP and session variables it shouldn’t take much work to port this script into a working login form. Many of the animations I’ve used are offered by default in jQuery, so you may be interested browsing form plugins for some alternate effects.

Be sure to download the source code above and play around with the demo when you have time. If you launch anything live onto your own website we would love to see it! Additionally if you have questions or comments feel free to offer your ideas in the discussion area below.

Powered by Shutterstock

About Jake Rocheleau

Jake is a digital researcher and writer on many popular design magazines. He frequently writes on topics including web design, user experience, mobile apps, and project management. You can find him all throughout Google and tweeting @jakerocheleau. Connect with Jake on google+