Live Availability Checking with jQuery

By | April 19, 2011

You will need to create just 2 php files and 1 css file for this. Here we go……

1. 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>

2. check_ajax.php

<?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';
}
}
?>

3. CSS Code

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

Leave a Reply