Live Availability Checking with jQuery.

Live Availability Checking with jQuery.

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">&nbsp;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';
}
}
?>CSS Code

body
{
font-family:Arial, Helvetica, sans-serif
}
#status
{
font-size:11px;
margin-left:10px;
}
.green
{
background-color:#CEFFCE;
}
.red
{
background-color:#FFD9D9;
}