In this tutorial you will learn How to create a Username Availability Live check Script using jQuery Ajax and PHP, it’s easy to create, i have used here $.ajax() you can also use $.post() method to create same script, flow is simple as user types preferred username in the input box then “$.ajax()” function calls an HTTP POST request dynamically and fetch the username from the MySQL Database Table through the PHP Script and shows that the username available or not all the functionality will done by “$.ajax()” keyup() event, have a look.

jQuery Username Availability Live Check with PHP and Ajax

This is Simple Tutorial contains two PHP files one is main “index.php” file contains jQuery/javascript Code and simple HTML Form, and second is “username-check.php” file which is called dynamically via $.ajax() POST request and displays username is available or not.

copy paste following sql code in your phpMyAdmin to create database and table.


CREATE TABLE `users` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`user_name` VARCHAR( 25 ) NOT NULL
) ENGINE = MYISAM ;

just for testing insert some records in the table, paste below sql code to insert records


INSERT INTO `dbtest`.`users` (`id`, `user_name`) VALUES (NULL, 'pradeep'), (NULL, 'CodingCage');

using $.ajax() function the code will be as follow :


$.ajax({    
    type : 'POST',
    url  : 'username-check.php',
    data : $(this).serialize(),
    success : function(data)
    {
    $("#result").html(data);
    }
});

using $.post() function the code will be as follow


$.post("username-check.php", $("#reg-form").serialize())
        .done(function(data){
 $("#result").html(data);
});

index.php

contains jQuery/javaScript code with HTML Form, when user types username in input box then keyup() event will executes and as name was typed it will send ajax POST request to “username-check.php” file and displays that the username is available or not


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live Username Availability Check using PHP PDO and jQuery</title>
<script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{    
 $("#name").keyup(function()
 {  
  var name = $(this).val(); 
  
  if(name.length > 3)
  {  
   $("#result").html('checking...');
   
   /*$.post("username-check.php", $("#reg-form").serialize())
    .done(function(data){
    $("#result").html(data);
   });*/
   
   $.ajax({
    
    type : 'POST',
    url  : 'username-check.php',
    data : $(this).serialize(),
    success : function(data)
        {
              $("#result").html(data);
           }
    });
    return false;
   
  }
  else
  {
   $("#result").html('');
  }
 });
 
});
</script>

</head>

<body>


<form id="reg-form" action="" method="post" autocomplete="off">
<fieldset>
 <div>
    <input type="text" name="name" id="name" placeholder="Username" />
    <span id="result"></span>
    </div>
</fieldset>
</form>
</body>
</html>

username-check.php

this one is simple PHP file which contains only PHP code and works silently at backend of main file and calls via $.ajax() function.


<?php
  
  $host="localhost";
  $user="root";
  $pass="";
  $dbname="dbtest";
  
  $dbcon = new PDO("mysql:host={$host};dbname={$dbname}",$user,$pass);
  
  if($_POST) 
  {
      $name     = strip_tags($_POST['name']);
      
   $stmt=$dbcon->prepare("SELECT user_name FROM users WHERE user_name=:name");
   $stmt->execute(array(':name'=>$name));
   $count=$stmt->rowCount();
      
   if($count>0)
   {
    echo "<span style='color:brown;'>Sorry username already taken !!!</span>";
   }
   else
   {
    echo "<span style='color:green;'>available</span>";
   }
  }
?>

style.css


@charset "utf-8";
/* CSS Document */

*{margin:0; padding:0;}
#reg-form
{
 margin:100px auto;
 padding:25px;
 border:solid #cfcfcf 1px;
 width:50%;
 background:#f9f9f9;
}
fieldset
{
 padding:5px;
 width:60%;
 margin:0 auto;
 border:0;
}
input
{
 width:100%;
 height:35px;
 border:solid #00a2d1 1px;
 padding-left:10px;
 font-family:Verdana, Geneva, sans-serif;
 font-weight:bold;
 font-size:15px;
}
span
{
 font-family:Verdana, Geneva, sans-serif;
 font-weight:bold;
 font-size:15px;
}

that’s it guys, we have covered here a simple jQuery Username Availability Checker Script so download and try and if you are facing any issue with this script please feel free to ask.