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.

Also, read:

• Ajax Login Script with PHP and jQuery
• Ajax Registration Script with PHP, MySQL and jQuery
• Bootstrap Contact Form with Captcha using Ajax and PHP

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 may also like:

• Working with php.ini file Configuration
• Control Statements in PHP
• Convert Associative Array into XML in PHP
• Convert XML into Associative Array in PHP
• Using Prepared Statement with PHP & MySQL
• How to Upload File in PHP
• Converting an Array to JSON in PHP
• Converting JSON to Array or Object in PHP
• Manipulating PHP arrays: push, pop, shift, unshift
• Remove Repeated Words From String in PHP
• Converting a PHP Array to a Query String
• 15+ regular expressions for PHP developers
• 10 Most Important Directory Functions in PHP
• 10 little known but useful PHP functions
• PHP Script to Download Large Files Reliably

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

Demo Download