[Web-development (jquery)] Check Availability username with jquery-ajax, php mysql

Check Availability username with jquery-ajax, php mysql





Javascript code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></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" align="absmiddle"> Checking...');
$.ajax({
type: "POST",
url: "check.php",
data: "username="+ username,
success: function(msg){
$("#status").ajaxComplete(function(event, request){
if(msg == 'OK')
{
 $("#username").removeClass("red");
 $("#username").addClass("green");
 msgbox.html('<img src="yes.png" align="absmiddle"> <font> Available </font> ');
}
else
{
 $("#username").removeClass("green");
$("#username").addClass("red");
msgbox.html(msg);
}
});
}

});

}
else
{
$("#username").addClass("red");
$("#status").html('<font>Enter valid User Name</font>');
}
return false;
});
});
</SCRIPT>

CSS Code

<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif
}
#status
{
font-size:11px;
margin-left:10px;
}
.green
{
background-color:#CEFFCE;
}
.red
{
background-color:#FFD9D9;
}
input
{
font-size:16px;
width:190px;
height:25px;
border:solid 1px #333333;
padding:4px;
}

</style>

HTML Code

<div>
<input type="text" name="username" /><span></span>
</div>

PHP Code

<?php
//check.php
$host = "localhost";
$username = "root";
$password = "ednalan";
$databasename = "test";
$connect = mysql_connect($host, $username, $password) or die("Opps some thing went wrong");
mysql_select_db($databasename, $connect) or die("Opps some thing went wrong");
if(isSet($_POST['username']))
{
$username = $_POST['username'];
$username = mysql_real_escape_string($username);
$sql_check = mysql_query("SELECT id FROM users WHERE username='$username'");
if(mysql_num_rows($sql_check))
{
echo '<font><STRONG>'.$username.'</STRONG> is already in use.</font>';
}
else
{
echo 'OK';
}
}
?>

source : http://pinterest.com, http://imgur.com, http://tutorial101.blogspot.com

Posted by Unknown