Simple And Fast Username Availability Check Script in PHP, MYSQL, JQUERY

by Posted on

In this tutorial i am going to show you how can you easily create Simple And Fast Username Availability Check Script in PHP, MYSQL, JQUERY and AJAX. When you plan to create signup form for you web based application then you need to check if user already registered with same username or not, If not then new account should be created.
ucheck-1
ucheck-2
So i am going to create this tutorial for newbie php developer to create this feature in very easy steps.

Your directory structure will be

+--img
---index.php
---request.php





Now create you index.php file and put some html code to create input box

<div id="usr">Username: <input type="text" id="uname" name="uname" autoComplete="off" placeholder= "Enter Username."/></div>
	<div id="status" style="display:none;"><img src="img/loading.gif">Checking Availability...</div>
  <div id="msg"></div>

Add some jquery on page to send request to sever on keyup event

<script>
$(function() {
	$("#uname").keyup(function(){
       $("#status").show();
       var uname = $.trim($("#uname").val());
       $.ajax({
          url: "request.php",
          dataType: "html",
          data: {uname:uname},
          success: function( data ) {
             // Handle success here
              if(data == 0){
					        $("#msg").html('<span class="green"><span class="glyphicon glyphicon-ok"></span> Username Available continue..</span>');
      				}else{
      					  $("#msg").html('<span class="red"><span class="glyphicon glyphicon-remove"></span>Username already exist, Please choose other name..!!</span>');
      				}
              $("#status").hide();
              if(uname == '') {
                 $("#msg").html('');
              }
          },
          error: function(e) {
          	// Handle error here
          	console.log(e);
          },
          timeout: 30000  
        });
  });
});
</script>




Now your final index.php file will be

index.php

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Username Availability Check Script in PHP, MYSQL, JQUERY </title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<style>
.red{
	color:red;
}
.green{
	color:green;
}
</style>
</head>
<body>
	<div id="usr">Username: <input type="text" id="uname" name="uname" autoComplete="off" placeholder= "Enter Username."/></div>
	<div id="status" style="display:none;"><img src="img/loading.gif">Checking Availability...</div>
  <div id="msg"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script>
$(function() {
	$("#uname").keyup(function(){
       $("#status").show();
       var uname = $.trim($("#uname").val());
       $.ajax({
          url: "request.php",
          dataType: "html",
          data: {uname:uname},
          success: function( data ) {
             // Handle success here
              if(data == 0){
		    $("#msg").html('<span class="green"><span class="glyphicon glyphicon-ok"></span> Username Available continue..</span>');
      			}else{
      		   $("#msg").html('<span class="red"><span class="glyphicon glyphicon-remove"></span>Username already exist, Please choose other name..!!</span>');
      				}
              $("#status").hide();
              if(uname == '') {
                 $("#msg").html('');
              }
          },
          error: function(e) {
          	// Handle error here
          	console.log(e);
          },
          timeout: 30000  
        });
  });
});
</script>
</html>

After that create server file to intract with mysql database and check username is available or not.

request.php

<?php 
$hostname = "localhost";
$username = "root";
$password = "root";
$dbname = "user";
$uname = $_GET['uname'];
if(isset($uname) || !empty($uname)) {
	$con = mysqli_connect($hostname, $username, $password, $dbname);
    $query = "SELECT * FROM users WHERE uname = '$uname'";
    $result = mysqli_query($con, $query);
    $num = mysqli_num_rows($result);
    echo $num;
}
?>

Cheers you have done all the required task, Now time to run your application..

DEMO DOWNLOAD

If you like this post please don’t forget to subscribe my public note book for more useful stuff

Published by admin