Verify login with ajax and jquery using Colorbox php

By Chris Filippou, Island Blue Design Founder on January 8, 2013

This is a working script for verifying login / submitting a form information using Colorbox and AJAX with jquery. I visited mulitple websites looking for something that worked including tons of stackoverflow posts, but I could not get the right script to work.

I ended up using a couple peices from various scripts and tweaking it on my own until it was just right. So if you are looking to have users login to a website with Colorbox, you can copy this exact code. I am supplying the jquery as well as the php that verifies the username and password and submits the form without leaving the page...UNLESS the verification is correct. My goal is to save you hours and the headaches, which is what happened to me trying to find the damn solution!!

On the login page, include this script in the header.

<script>
$(document).ready(function(){
$('#clientloginform').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
        if(response=='yes')
        {
        document.location='clientfiles.php';
        }
        else
        { //if correct login detail
            $('#results').html(response); }// update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});
});
            
        </script>

And then here is your colorbox code including the form. I have it sent to a verify-login.php page. I used an inline class to call the Colorbox, which means the div is hidden on the page, and only loaded if someone clicks the link. If you need information on Colorbox, click here.

<div id="clientlogin"><a class="inline" href="#clientbox">Client Login</a></div>
<div style="display:none;">
<div id="clientbox" class="clientbox">
<h3>Please Login</h3>
<div id="results"> </div>
<form action="verify-login.php" method="post" id="clientloginform">
<div class='results'> </div>
<p>USERNAME:<br />
<input type="text" name="username" class="loginput" />
<p>PASSWORD:<br />
<input type="text" name="pass" class="loginput" />
<p><input type="submit" class="submit" value="Login" />
</form>
</div>  
</div>

Now here is the verify-login.php code.

<?php
include ("connect.php");
$pass = md5($_POST['pass']);
$username = mysql_real_escape_string($_POST['username']);
$select_query="SELECT * FROM users WHERE username = '$username' AND pass = '$pass'";
$result=mysql_query($select_query);
$row=mysql_fetch_array($result);
$username_id = $row['username'];
$count = mysql_num_rows($result);
if($count==1) {
session_start();
$_SESSION['authorized'] = true;
$_SESSION['username'] = $username_id;
echo "yes";
} else {

echo "<p style='color:#f00; font-size:11px;'>Sorry, that is not the correct username / password</p>";
}

?>

Now where it says clientfiles.php is the page that directs the user if the login is correct. That can be any page you desire. If the verification is not correct, the user will stay in the colorbox pop up and receive the message "Sorry, that is not the correct username / password".

That's it! You have got to love AJAX, although it can be very frustrating when it doesn't work as expected.

Try it out and if you have any questions just leave a comment or shoot me an email.

Comments

GET A FREE QUOTE ON ALL WEB DESIGN SERVICES!

Let's make sure you're human! 5 + 3 =

SEO Services

seo services companySEO techniques will change rapidly through time and understanding the latest algorithm updates implemented by the major search engines is very important for any SEO company and its customers. Find out more on SEO today!

Custom Web Design

baltimore web designYour website presence is going to define your business, blog or organization. Often a website is the first contact any potential customers will have with your brand or business therefore making a positive first impression is critical.

Creative Logo Design

creative logo designOur creative team of professional designers will create an amazing custom logo for your new business or organization. Your logo represents your company and can make a long lasting impression when done right.