This tutorial i am explain about how to check the username live availability using php and ajax concept, This is a simple concept to check the availability to the username like gmail, yahoomail.This concept also very important and useful because we are going to identify the unique username to identify the perfect person.It will check the database the username already exist or not in the particular database very fast using ajax and php.
Code:
Database and Table :
--
-- Database: `sanwebcorner`
--
-- --------------------------------------------------------
--
-- Table structure for table `user`
--
CREATE TABLE IF NOT EXISTS `user` (
`userid` int(5) NOT NULL AUTO_INCREMENT,
`username` varchar(25) NOT NULL,
`password` varchar(25) NOT NULL,
`email` varchar(25) NOT NULL,
PRIMARY KEY (`userid`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=14 ;
--
-- Dumping data for table `user`
--
INSERT INTO `user` (`userid`, `username`, `password`, `email`) VALUES
(12, 'sandilyan', 'san007', 'san@gmail.com'),
(13, 'Naveenkumar', 'Naveen430', 'naveen@gmail.com');
index.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Check Username availability in registration form using php/mysql </title>
<link rel="stylesheet" type="text/css" href="san.css">
<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();
if(username.length > 3)
{
$("#availability_status").html('<img src="ajax-loader-big.gif" align="absmiddle"> Please wait Checking availability...');
$.ajax({
type: "POST",
url: "avail.php",
data: "username="+ username,
success: function(server_response){
$("#availability_status").ajaxComplete(function(event, request){
if(server_response == '0')
{
$("#availability_status").html('<img src="available.png" align="absmiddle"> <font color="Green">Username Available </font> ');
}
else if(server_response == '1')
{
$("#availability_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Username Not Available </font>');
}
});
}
});
}
else
{
$("#availability_status").html('<font color="#cc0000">Username too short</font>');
}
return false;
});
});
</script>
</head>
<body>
<div class="box">
<form action="insert.php" method="get">
<h1 style="text-decoration:underline;">Username Availability Checking.....</h1>
<label>Username :</label>
<input type="text" name="username" id="username" class="txt"/>
<span id="availability_status"></span> <br><br>
<label>Password:</label>
<input type="text" name="password" id="password" class="txt"/><br><br>
<label>Email ID :</label>
<input type="text" name="email" id="email" class="txt"/><br><br>
<input name="submit" type="submit" value="submit" class="sub" /><br><br>
</form>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Check Username availability in registration form using php/mysql </title>
<link rel="stylesheet" type="text/css" href="san.css">
<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();
if(username.length > 3)
{
$("#availability_status").html('<img src="ajax-loader-big.gif" align="absmiddle"> Please wait Checking availability...');
$.ajax({
type: "POST",
url: "avail.php",
data: "username="+ username,
success: function(server_response){
$("#availability_status").ajaxComplete(function(event, request){
if(server_response == '0')
{
$("#availability_status").html('<img src="available.png" align="absmiddle"> <font color="Green">Username Available </font> ');
}
else if(server_response == '1')
{
$("#availability_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Username Not Available </font>');
}
});
}
});
}
else
{
$("#availability_status").html('<font color="#cc0000">Username too short</font>');
}
return false;
});
});
</script>
</head>
<body>
<div class="box">
<form action="insert.php" method="get">
<h1 style="text-decoration:underline;">Username Availability Checking.....</h1>
<label>Username :</label>
<input type="text" name="username" id="username" class="txt"/>
<span id="availability_status"></span> <br><br>
<label>Password:</label>
<input type="text" name="password" id="password" class="txt"/><br><br>
<label>Email ID :</label>
<input type="text" name="email" id="email" class="txt"/><br><br>
<input name="submit" type="submit" value="submit" class="sub" /><br><br>
</form>
</div>
</body>
</html>
avail.php
<?php
include('db.php');
if(isset($_POST['username']))
{
$username = mysql_real_escape_string($_POST['username']);
$check_for_username = mysql_query("SELECT userid FROM user WHERE username='$username'");
if(mysql_num_rows($check_for_username))
{
echo '1';
}
else
{
echo '0';
}
}
?>
db.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "sanwebcorner";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>
san.css
@charset "utf-8";
/* CSS Document */
.avail {
font-size:12px;
margin-left:15px;
letter-spacing:1px;
}
.txt {
width: 221px;
color : #747862;
height:20px;
border:1px solid #000;
padding:4px 8px;
margin-bottom:0px;
}
label {
width: 125px;
float: left;
text-align: left;
margin-right: 0.5em;
display: block;
}
.box {
margin-left: auto;
margin-right: auto;
width: 650px;
margin-top:20px;
border:1px solid #CCC;
border-radius:25px;
padding:35px;
}
.sub {
margin-left:180px;
height:50px;
width: 111px;
}
2 Comments
I have been following your website and this is very helpful. regarding this post you mentioned about
ReplyDeleteform action="insert.php" method="get"
but you have not given any insert.php codes. Kindly fix this one. Thank you and more power.
this post only for checking the username availability so that only i am not inserted the data... i am inserted the data manually ok..... Thanks for your comment
ReplyDelete