Creating a form that tells you that your entered data already exist in the database and you don’t need to enter again. This is very famous functionality adopted by almost all top social companies like Facebook and Twitter.
In this tutorial, we are going to learn how to create a PHP script that shows Live username availability check using PHP. Check username from MySQL database data using PHP and Jquery. So let’s start Live Username Availability Check using PHP
First, Create Database and In database create a table with name users
Table of Contents
Create Table
Create a table with name user and in this table, we are creating three attributes id, name, and username.
CREATE TABLE user ( id INT(11) NOT NULL AUTO_INCREMENT, name VARCHAR(30) NOT NULL, username VARCHAR(25), CONSTRAINT contacts_pk PRIMARY KEY (id) );
After creating the table we have to create Interface where we put our query for checking the username whether that particular username available or not into our table.
Database Connection
After creating a table we need to connect our PHP script to the database.
<?php
$con=mysqli_connect("localhost","root","","live") or die("Unable to connect Database");
?>
Input Design
In an input, we need only one input box for query and one span tag for showing the result.
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <div class = "jumbotron" align = "center"> <input type = "text" name = "username" id = "username" placeholder = "Enter your UserName"> </div> <div align = "center"> <span id = "Result" align = "center"></span> </div>
Here I add some bootstrap CSS for good UI
javascript for search result
Here I used KEYUP() function where when the user writes something in input box then KEYUP() function event is called and send ajax POST request to “check.php” file. If the username is available then it said: ” User Not Taken, Available “.
<script type="text/javascript">
$(document).ready(function() {
$('#username').keyup(function(){
$.post("check.php", {
username: $('#username').val()
}, function(response){
$('#Result').fadeOut();
setTimeout("finishAjax('Result', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#Result').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
check.php file
This file checks whether this username is available or not in the database.
<?php
$con=mysqli_connect("localhost","root","","live") or die("Unable to connect Database");
if(isset($_POST) & !empty($_POST)){
$username = mysqli_real_escape_string($con,$_POST['username']);
$sql = "SELECT username FROM user WHERE username = '$username'";
$result = mysqli_query($con,$sql);
$count = mysqli_num_rows($result);
if($count == 1){
echo "<b style = 'color:#ff0000;'>"."Username Taken, Not Available"."</b>";
}else{
echo "<b style ='color:#008000;'>"."User Not Taken, Available"."</b>";
}
}
?>
Full code for this live search
index.php
<?php
$con=mysqli_connect("localhost","root","","live") or die("Unable to connect Database");
?>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class = "jumbotron" align = "center">
<input type = "text" name = "username" id = "username" placeholder = "Enter your UserName">
</div>
<div align = "center">
<span id = "Result" align = "center"></span>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#username').keyup(function(){
$.post("check.php", {
username: $('#username').val()
}, function(response){
$('#Result').fadeOut();
setTimeout("finishAjax('Result', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#Result').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
check.php
<?php
$con=mysqli_connect("localhost","root","","live") or die("Unable to connect Database");
if(isset($_POST) & !empty($_POST)){
$username = mysqli_real_escape_string($con,$_POST['username']);
$sql = "SELECT username FROM user WHERE username = '$username'";
$result = mysqli_query($con,$sql);
$count = mysqli_num_rows($result);
if($count == 1){
echo "<b style = 'color:#ff0000;'>"."Username Taken, Not Available";
}else{
echo "<b style ='color:#008000;'>"."User Not Taken, Available";
}
}
?>
You can also check:-
Ajax Live Data Search using PHP and MySQL
Insert Data into MySQL database with PHP and AJAX without refreshing page
Dynamic Dependent Multiple Relational Dropdown using (Jquery, AJAX, PHP, MySQL)
I hope this post helped you to know Live Username Availability Check using PHP. To get the latest news and updates follow us on twitter & facebook, subscribe to our YouTube channel. And If you have any query then please let us know by using the comment form.