This is a working script for verifying login / submitting a form information using Colorbox and AJAX with jQuery. I visited multiple 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 pieces 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.
$(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 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.
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.
Contact Us
Island Blue Design
1829 Reisterstown Road
Suite 350
Pikesville, MD 21208