Check Username Availability With jQuery In PHP And MySql

This is a script to Check Username availability with Jquery in PHP and MySql, after entering the username it will check in the database and displays a message depending on the result from the database, we are using simple jquery code to achieve this, first of all using jquery, we are reading the input value and then sending it a php page, it will search the database table, depending on the response it will display message.

Code for Check Username availability with Jquery in PHP and MySql

If you are following along from previous articles, you should have connect.php file to connect to database. And database table created with some records in it. If you haven’t follow these below articles.

You can watch this video about username availability with jQuery in PHP & MySQL

Create a simple form with username, email, password fields. You can use this below form HTML code.

  <form class="form-signin" method="POST">
    <h2 class="form-signin-heading">Please Register</h2>
    <div class="input-group">
	  <span class="input-group-addon" id="basic-addon1">@</span>
	  <input type="text" name="username" id="username" class="form-control" placeholder="Username" required>
	</div>
	
	<label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>
    <a class="btn btn-lg btn-primary btn-block" href="login.php">Login</a>
  </form>

<h2 class="form-signin-heading">Please Register</h2>

</div>

<label for="inputEmail" class="sr-only">Email address</label>

<label for="inputPassword" class="sr-only">Password</label>

<button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>

<a class="btn btn-lg btn-primary btn-block" href="login.php">Login</a>

</form>

And add this below code, right after the username input div. This code is used to display loading image while typing username & to display messages like “username available” or “username not available”.

<span id="usernameLoading"><img src="loading.gif" alt="Ajax Indicator" /></span>
<span id="usernameResult"></span>

1 2	<span id="usernameLoading"><img src="loading.gif" alt="Ajax Indicator" /></span> <span id="usernameResult"></span>

Then add the jQuery file inside head section the HTML code, you can use any latest version.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>

1	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

Add this jQuery code below jQuery CDN file. This code is used to send input fields value to check.php file (that we are going to create it) based on the id assigned to input field while typing (using keyup jQuery function).

Also while typing I’m displaying loading gif (you can use any loading animation image in square shape). After getting result from check.php, I’m hiding loading image & displaying message in #usernameResult id like “username available” or “username not available”.

<script type="text/javascript">
	$(document).ready(function() {
		$('#usernameLoading').hide();
		$('#username').keyup(function(){
		  $('#usernameLoading').show();
	      $.post("check.php", {
	        username: $('#username').val()
	      }, function(response){
	        $('#usernameResult').fadeOut();
	        setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400);
	      });
	    	return false;
		});
	});

	function finishAjax(id, response) {
	  $('#usernameLoading').hide();
	  $('#'+id).html(unescape(response));
	  $('#'+id).fadeIn();
	} //finishAjax
</script>

$(document).ready(function() {

$('#usernameLoading').hide();

$('#username').keyup(function(){

$('#usernameLoading').show();

$.post("check.php", {

username: $('#username').val()

}, function(response){

$('#usernameResult').fadeOut();

setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400);

});

return false;

});

function finishAjax(id, response) {

$('#usernameLoading').hide();

$('#'+id).html(unescape(response));

$('#'+id).fadeIn();

} //finishAjax

</script>

Then create a new PHP file & save this as check.php. This file is used to check the username from database & displaying results in our main file under username field.

Fisrt of all include connect.php file

<?php
require_once('connect.php');

1 2	<?php require_once('connect.php');

Then I’m execting PHP code, if the post super global has data.
Assigning username to a variable, using select sql query checking username exists in database or not.

If the select queries result is equal to one, that means a record exists in database with that specific username “username not available” message will be displayed. Else “username available” message will be displayed.

if(isset($_POST) & !empty($_POST)){
	$username = mysqli_real_escape_string($connection, $_POST['username']);

	$sql = "SELECT * FROM `login` WHERE username='$username'";
	$result = mysqli_query($connection, $sql);
	$count = mysqli_num_rows($result);
	if($count == 1){
		echo "Username Not Available";
	}else{
		echo "Username Available";
	}
}

if(isset($_POST) & !empty($_POST)){

$username = mysqli_real_escape_string($connection, $_POST['username']);

$sql = "SELECT * FROM `login` WHERE username='$username'";

$result = mysqli_query($connection, $sql);

$count = mysqli_num_rows($result);

if($count == 1){

echo "Username Not Available";

}else{

echo "Username Available";

}

Complete Code of Check Username Availability With jQuery In PHP And MySql

If you have problem arranging above pieces of code, you can use this complete code.

Save this file as register.php or check-username.php

<!DOCTYPE html>
<html>
<head>
	<title>User Name Validation in PHP & MySQL</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

	<link rel="stylesheet" type="text/css" href="styles.css">

	<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			$('#usernameLoading').hide();
			$('#username').keyup(function(){
			  $('#usernameLoading').show();
		      $.post("check.php", {
		        username: $('#username').val()
		      }, function(response){
		        $('#usernameResult').fadeOut();
		        setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400);
		      });
		    	return false;
			});
		});

		function finishAjax(id, response) {
		  $('#usernameLoading').hide();
		  $('#'+id).html(unescape(response));
		  $('#'+id).fadeIn();
		} //finishAjax
	</script>

</head>
<body>
<div class="container">
      <?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
      <?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>
      <form class="form-signin" method="POST">
        <h2 class="form-signin-heading">Please Register</h2>
        <div class="input-group">
		  <span class="input-group-addon" id="basic-addon1">@</span>
		  <input type="text" name="username" id="username" class="form-control" placeholder="Username" required>
		</div>
		<span id="usernameLoading"><img src="loading.gif" alt="Ajax Indicator" /></span>
		<span id="usernameResult"></span>
		
		<label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>
        <a class="btn btn-lg btn-primary btn-block" href="login.php">Login</a>
      </form>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>User Name Validation in PHP & MySQL</title>

$(document).ready(function() {

$('#usernameLoading').hide();

$('#username').keyup(function(){

$('#usernameLoading').show();

$.post("check.php", {

username: $('#username').val()

}, function(response){

$('#usernameResult').fadeOut();

setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400);

});

return false;

});

function finishAjax(id, response) {

$('#usernameLoading').hide();

$('#'+id).html(unescape(response));

$('#'+id).fadeIn();

} //finishAjax

</script>

</head>

<body>

<?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>

<?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>

<h2 class="form-signin-heading">Please Register</h2>

</div>

<label for="inputEmail" class="sr-only">Email address</label>

<label for="inputPassword" class="sr-only">Password</label>

<button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>

<a class="btn btn-lg btn-primary btn-block" href="login.php">Login</a>

</form>

</div>

</body>

</html>

Save this file as check.php, if you want to use different file name update the file name in above jQuery code also.

<?php
require_once('connect.php');
if(isset($_POST) & !empty($_POST)){
	$username = mysqli_real_escape_string($connection, $_POST['username']);

	$sql = "SELECT * FROM `login` WHERE username='$username'";
	$result = mysqli_query($connection, $sql);
	$count = mysqli_num_rows($result);
	if($count == 1){
		echo "Username Not Available";
	}else{
		echo "Username Available";
	}
}

<?php

require_once('connect.php');

if(isset($_POST) & !empty($_POST)){

$username = mysqli_real_escape_string($connection, $_POST['username']);

$sql = "SELECT * FROM `login` WHERE username='$username'";

$result = mysqli_query($connection, $sql);

$count = mysqli_num_rows($result);

if($count == 1){

echo "Username Not Available";

}else{

echo "Username Available";

}

If you want to learn other things you can read other posts – registration, login, user login with activation check, and sending forgotten password by email, Check Username Availability .

I hope this article helped you to learn user login using PHP and MySQL . To get latest news and updates follow us on twitter & facebook, subscribe to newsletter. If you have any feedback please let us know by using comment form.