I received a mail from my reader that asked to me how to implement live username availability checking. So I had prepared a simple and understanding tutorial with changing background color using jQuery and Ajax. Take a look at live demo.
Download Script 
Live DemojQuery 1.3 with PHP
user_check.php
$('#username').change(function(){} - username is the ID of the input. Using $("#username").val("id") calling input field value. First checking the value string length max 3 (username.length > 3))
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#username").change(function()
{
var username = $("#username").val();
var msgbox = $("#status");
if(username.length > 3)
{
$("#status").html('<img src="loader.gif"> Checking availability.');
$.ajax({
type: "POST",
url: "check_ajax.php",
data: "username="+ username,
success: function(msg){
$("#status").ajaxComplete(function(event, request){
if(msg == 'OK')
{
// if you don't want background color remove these following two lines
$("#username").removeClass("red"); // remove red color
$("#username").addClass("green"); // add green color
msgbox.html('<img src="yes.png"> <font color="Green"> Available </font>');
}
else
{
// if you don't want background color remove these following two lines
$("#username").removeClass("green"); // remove green color
$("#username").addClass("red"); // add red color
msgbox.html(msg);
}
});
}
});
}
else
{
// if you don't want background color remove this following line
$("#username").addClass("red"); // add red color
$("#status").html('<font color="#cc0000">Enter valid User Name</font>');
}
return false;
});
});
</script>
<input type="text" name="username" id="username" />
<span id="status"></span>
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#username").change(function()
{
var username = $("#username").val();
var msgbox = $("#status");
if(username.length > 3)
{
$("#status").html('<img src="loader.gif"> Checking availability.');
$.ajax({
type: "POST",
url: "check_ajax.php",
data: "username="+ username,
success: function(msg){
$("#status").ajaxComplete(function(event, request){
if(msg == 'OK')
{
// if you don't want background color remove these following two lines
$("#username").removeClass("red"); // remove red color
$("#username").addClass("green"); // add green color
msgbox.html('<img src="yes.png"> <font color="Green"> Available </font>');
}
else
{
// if you don't want background color remove these following two lines
$("#username").removeClass("green"); // remove green color
$("#username").addClass("red"); // add red color
msgbox.html(msg);
}
});
}
});
}
else
{
// if you don't want background color remove this following line
$("#username").addClass("red"); // add red color
$("#status").html('<font color="#cc0000">Enter valid User Name</font>');
}
return false;
});
});
</script>
<input type="text" name="username" id="username" />
<span id="status"></span>
check_ajax.php
Contains PHP code.
<?php
include('db.php');
if(isSet($_POST['username']))
{
$username = $_POST['username'];
$username = mysql_real_escape_string($username);
$sql_check = mysql_query("SELECT user_id FROM users WHERE username='$username'");
if(mysql_num_rows($sql_check))
{
echo '<font color="#cc0000"><b>'.$username.'</b> is already in use.</font>';
}
else
{
echo 'OK';
}
}
?>
include('db.php');
if(isSet($_POST['username']))
{
$username = $_POST['username'];
$username = mysql_real_escape_string($username);
$sql_check = mysql_query("SELECT user_id FROM users WHERE username='$username'");
if(mysql_num_rows($sql_check))
{
echo '<font color="#cc0000"><b>'.$username.'</b> is already in use.</font>';
}
else
{
echo 'OK';
}
}
?>
CSS Code
body
{
font-family:Arial, Helvetica, sans-serif
}
#status
{
font-size:11px;
margin-left:10px;
}
.green
{
background-color:#CEFFCE;
}
.red
{
background-color:#FFD9D9;
}
{
font-family:Arial, Helvetica, sans-serif
}
#status
{
font-size:11px;
margin-left:10px;
}
.green
{
background-color:#CEFFCE;
}
.red
{
background-color:#FFD9D9;
}
Just love`it!
ThanQ !
LI love the every effort you put on to expalin, really awesome and useful post,.. thankk u... :)
thanks so much for this tutorial, I have a different question; How can I get a comment box like this? if you could answer that would be great thanks again
Just great, can put timer on image loader by example 3 seconds 2 seconds qherever i want ??
can u use timer in the above code... me struggling .. Plz help
Nice Post,
Thank you.
great post
Useful
Nice
:D THX
USEFUL AND NICE.
Thanks.
A very nice script, though if you try one and its not available and you try another after the loading animation is finished it will show the previous result for a short second. Just thought I would mention it :).
A script I will for sure use!
This is awesome! Exactly what I've been looking for for my forms. Well done!
thank you ,perfect work
very nice! thanks for sharing!
awesome work man
hey nice code..use comments so that code will be more understandable..
Thanks Srinivas!
Following you on twitter now, this is probably the best page on the net that shows how to use jQuery and other great techniques!
Best Regards
Charlie
Just a tip!
You´ve made a variable stating that status is $("#status) div.
Use that in all places instead of the:
$("#status").html( mg src="loader.gif"> Checking availability.');
like-> status.html('img....'>" Checking availability.');
Thank you for the best learningsite on the web!
nice post
liked it thanx
Awesome bro, it saved me a life time..
thank you for sharing..