Check username availability using javascript and php mysqli

Most of popular  website using in this method,so this tutorial focus for  username availability method.in this method commonly used for user registration form section.this function should be check username to mysql database.

Demo

 

Download source code




following code:

conn.php

In this page to connect database,

<?php
/**
 * This code is php and mysqli connection part.
 
 */
$con=mysqli_connect("localhost","root","","user");
?>

index.php

Simple html and javascript code use in this php file,

<?php include "conn.php";?><!-- mysqli database include -->
<html>
<head>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script><!-- javascript file include,i will attach in this file our folder -->
<script>
function checkAvailability() {
	$("#loaderIcon").show();
	jQuery.ajax({
	url: "check_availability.php",
	data:'username='+$("#username").val(),
	type: "POST",
	success:function(data){
		$("#user-availability-status").html(data);<!-- using javascript to call username in html -->
		$("#loaderIcon").hide();
	},
	error:function (){}
	});
}

</script>
</head>

<body>
<br><br>
<center><h3><span style="color:red;font-size:28px;">Note:</span> suresh,ramesh username already store to database,so please type other username.</h3></center>
<center><form  method="post" name="myForm" action="">
<strong>Username</strong> <span style="color:red;">*</span> <input type="text" name="username" id="username" onBlur="checkAvailability()" required><span id="user-availability-status"><br><br>

</form></center>
</body>
</html>

check_availability.php

in this file focus for database section, if username  available or not to check database.

<?php include "conn.php";?>

<?php
if(!empty($_POST["username"])) {
  $result = mysqli_query($con,"SELECT count(*) FROM user WHERE username='" . $_POST["username"] . "'"); /*find record to Mysql database*/
  $row = mysqli_fetch_row($result);
  $user_count = $row[0];
  if($user_count>0) {
      echo "<img src='wicon.png'/><span class='status-not-available'>Already taken.</span></span>";/*display availability status and image*/
  }else{
      echo "<img src='ricon.png'/><span class='status-available'> Username Available.</span>";
  }
}


?>

image file and mysql file attach to folder you can download it.

We hope, you all are like this topic.if you have any query,please drop me your comment below comment box section,we are reply to you as soon as possible.




Add a Comment

Your email address will not be published. Required fields are marked *