check username availability using php and ajax | Sanwebcorner

check username availability using php and ajax

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.

check live username availability


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">&nbsp;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;
}


Download Code


2 comments