Post by Free50websolution
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.
About Author
