Many sites have signup pages. Every programmers try to make the signup pages attractive by adding stylish input CSS codes and others. Why not add a stylish username availability checker ? It’s very easy to add and will work on jQuery versions 1.2 and up. I’m also going to tell you how to check if username is available in the server side. Of course it’s PHP. The checking is SQL Injection free too. For Executing SQL queries we will use PHP PDO.
First of all create two files – index.php (signup page), check.php & checker.js
It’s not necessary to set the name of signup page to index.php. Any name will work.
index.php
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="checker.js"></script>
</head>
<body>
<input type="text" size="35" id="user" value="" placeholder="Type Your Desired Username"/>
<input type="button" id="check" style="cursor:pointer;" value="Check Availablity"/><br/>
<div style="margin:5px 15px;" id="msg">http://mysite.com/<b id="prev">subinsiby</b></div>
</body>
</html>checker.js – Request To Check Username
$(document).ready(function(){
v=$("#user");
$("#check").on('click',function(){
v.attr("disabled","true");
v.css({background:"url(../cdn/load.gif) no-repeat",backgroundSize: "2em",backgroundPosition: "center right"});
$.post('check.php',{user:v.val().toLowerCase()},function(d){
v.css("background","white");
v.removeAttr("disabled");
if(d=='available'){
$("#msg").html("<span style='color:green;'>The username <b>"+v.val().toLowerCase()+"</b> is available</span>");
}else{
$("#msg").html("<span style='color:red;'>The username <b>"+v.val().toLowerCase()+"</b> is not available</span>");
}
});
});
v.bind('keyup',function(){
$("#prev").text(v.val().toLowerCase());
});
});check.php – Checks Username
<?
include("config.php");
$user=strtolower($_POST['user']);
if(isset($_POST) && $user!=''){
$sql=$dbh->prepare("SELECT username FROM users WHERE username=?");
$sql->execute(array($user));
if($sql->rowCount()==0){
echo "available";
}else{
echo "not-available";
}
}
?>and of course config.php
<?
$host = "localhost"; // Database Hostname
$port = "3306"; / /MySQL Port : Default : 3306
$user = "username"; // Databse Username Here
$pass = "password"; // Databse Password Here
$db = "database_name"; // Database Name
$dbh = new PDO('mysql:dbname='.$db.';host='.$host.';port='.$port,$user,$pass);
?>
When the user clicks the Check Availability button, jQuery will send a POST request to check.php with user parameter containing the username value the client entered. check.php will check it’s database with the username given by AJAX call. If it matches a user response will be not-available and if it doesn’t match a user, then the response will be available.
jQuery will make changes to the page according to the AJAX response ie jQuery will take care of the rest. If you have any suggestions / feedback/ problems , say it in the comments.