In this tutorial, we will see a PHP script to use live test username using AJAX, jQuery, and MySQL. This is a common and popular feature of many websites available online.

While creating a user account, as soon as the user enters the username, the AJAX call will ask for a PHP page on the server side to determine the availability of the username availability. PHP page matches user input to a database and retrieves response text based on availability.


Database Script for user_data Table

Import a user_data table to use this example locally. 

CREATE TABLE `user_data` (
  `id` int(11) NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(250) NOT NULL,
  `email` varchar(50) NOT NULL,
  `phone` varchar(100) NOT NULL,
  `city` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;



Create two file for checking Username Availability

index.php file where any new user will enter their username for that we need to make form for entering username second file is check_availability.php where we will send for data and check the user already exist or not in our database table

  1. index.php
  2. check_availability.php



Check Username Availability Form Interface

This form contains a username input field and triggers an AJAX call in the blurring event for this input. 

#index.php

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div id="frmCheckUsername">
                    <label>Check Username:</label>
                    <input name="username" type="text" id="username" class="demoInputBox" onBlur="checkAvailability()"><span id="user-availability-status"></span>    
                </div>
                <p><img src="loder.gif" id="loaderIcon" style="display:none" /></p>
            </div>
        </div>

        <script type="text/javascript">
            function checkAvailability() {
                $("#loaderIcon").show();

                $.ajax({
                    type: "POST",
                    url: "check_availability.php",
                    cache: false,
                    data: {
                        type: 1,
                        username: $("#username").val(),
                    },
                    success: function(data) {
                        $("#user-availability-status").html(data);
                        $("#loaderIcon").hide(1000);
                    }
                });
            }
        </script>
    </body>
</html>


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.


#check_availability.php

<?php

$con = mysqli_connect('localhost', 'root', '', 'tutorial');
if (!$con) {
    die("Failed to connect:" . mysqli_connect_error());
}
if (isset($_POST['type']) == 1) {
    $username = $_POST['username'];
    $query = "SELECT * FROM user_data where username ='" . $username . "' ";
    $result = mysqli_query($con, $query);
    $rowcount = mysqli_num_rows($result);
    if ($rowcount > 0) {
        echo "<span class='status-not-available'> Username Not Available.</span>";
    } else {
        echo "<span class='status-available'> Username Available.</span>";
    }
}
?>

#output:



Are you facing problems in understanding this article?

Download Source