Live Username Availability Check using PHP and jQuery AJAX

by Vincy. Last modified on June 1st, 2021.

In this tutorial, we will see a PHP script to implement username live check feature using AJAX, jQuery, and MySQL. This is a common and popular feature in most of the websites available online.

While creating a user account, just after the user enters the username, an AJAX call will request the PHP page at the server side to get the availability status of the username.

The PHP page matches the user input against the database and returns the response text based on the availability.

View Demo

Database Script for users Table

Import the users database table to run this example in your local environment.


The SQL script for the users table is,

  `userId` int(8) NOT NULL AUTO_INCREMENT,
  `userName` varchar(55) NOT NULL,
  `password` varchar(55) NOT NULL,
  `firstName` varchar(55) NOT NULL,
  `lastName` varchar(55) NOT NULL,
  PRIMARY KEY (`userId`)

INSERT INTO `users` (`userId`, `userName`, `password`, `firstName`, `lastName`) VALUES
(24, 'joel', '', 'Joel', 'Thomas'),
(26, 'merlinsofia', '', 'merlin', 'sofia'),
(27, 'matt', '', 'Matthew', 'Matthew'),
(28, 'mike', '', 'Mike', 'Anto');

Check Username Availability Form Interface

This form contains username input field and triggers AJAX call on blur event of this input. The loader icon is shown to the user until the availability status is returned to the user interface.

<div id="frmCheckUsername">
  <label>Check Username:</label>
  <input name="username" type="text" id="username" class="demoInputBox" onBlur="checkAvailability()"><span id="user-availability-status"></span>    
<p><img src="LoaderIcon.gif" id="loaderIcon" style="display:none" /></p>

jQuery AJAX Handler to Request User Availability

This Javascript function uses jQuery.ajax to send the username entered by the user along with the request for a PHP page.

function checkAvailability() {
url: "check_availability.php",
type: "POST",
error:function (){}

Match Username against Database using PHP

This PHP script is executed as a result of the jQuery AJAX call. It compares database and user data to check username. Based on the availability status it will respond to the AJAX call.

$db_handle = new DBController();

if(!empty($_POST["username"])) {
  $query = "SELECT * FROM users WHERE userName='" . $_POST["username"] . "'";
  $user_count = $db_handle->numRows($query);
  if($user_count>0) {
      echo "<span class='status-not-available'> Username Not Available.</span>";
      echo "<span class='status-available'> Username Available.</span>";


This PHP class handles database related functionalities like establishing connection and calculating row count to check the user name availability.

class DBController {
    private $host = "localhost";
    private $user = "root";
    private $password = "test";
    private $database = "blog_samples";
    private static $conn;
    function __construct() {
        $this->conn = $this->connectDB();
        if(!empty($this->conn)) {
    function connectDB() {
        $conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);
        return $conn;
    function selectDB() {
        mysqli_select_db($this->conn, $this->database);
    function numRows($query) {
        $result  = mysqli_query($this->conn, $query);
        $rowcount = mysqli_num_rows($result);
        return $rowcount;

View DemoDownload

↑ Back to Top