Check User Availability with PHP and jQuery

Checking username or email availability before form submission is a popular feature. In this tutorial, we have implemented username availability check functionality using PHP, MySQL and jQuery AJAX.

In this username availability check functionality, after the user enters the username, an AJAX request made to the PHP page to get the availability status of the username by matching the user input against the database and returns the response based on the user availability.


Here in this tutorial, I have explained simple steps to implement username availability check functionality using PHP, MySQL and jQuery AJAX with demo.

So let’s start the coding

Steps1: Create Check Username Availability Form
First you need to create username availability form. The form will contain username input field and triggers AJAX call on blur event of this input. The loader icon is shown to the user until the username availability status is returned to the user interface.

<div class="col-xs-3">
<label for="username">Check Username:</label>
<input class="form-control" name="username" type="text" id="username" onBlur="checkUserAvailability()">
<span id="user-availability-status"></span>
</div>
<p><img src="loader.gif" id="loader" style="display:none" /></p>


Steps2: jQuery AJAX Handler For User Availability Check
This Javascript function uses jQuery.ajax request to send the username entered by the user to a PHP page to get the availability status of the username by matching the user input against the database. The function also handles username availability message according to response.

function checkUserAvailability() {
$("#loader").show();
jQuery.ajax({
url: "check_user_availability.php",
data:'username='+$("#username").val(),
type: "POST",
success:function(data){
if(data == 1) {
$("#user-availability-status").html("Username Not Available.");
$("#user-availability-status").removeClass('available');
$("#user-availability-status").addClass('not-available');
} else {
$("#user-availability-status").html("Username Available.");
$("#user-availability-status").removeClass('not-available');
$("#user-availability-status").addClass('available');
}
$("#loader").hide();
},
error:function (){}
});
}



Steps3: Check Username Availability Against Database using PHP
This PHP script will execute the jQuery AJAX call request. It match user data to check username with database and returns the response based on the user availability. If username is available then return 1 otherwise 0.

include_once("../db_connect.php");
if(!empty($_POST["username"])) {
$_POST["username"] = trim($_POST["username"]);
$sql = "SELECT user FROM users WHERE user='" . $_POST["username"] . "'";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$row = mysqli_fetch_assoc($resultset);
if($row['user']) {
echo "1";
} else {
echo "0";
}
}


You can view the live demo from the Demo link and can download the script from the Download link below.

Demo [sociallocker]Download[/sociallocker]