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.
Hey Jamaley
Impressive article. You should definitely post on superuser and github.
Hi, Ashish
Thanks for a beautiful suggestion will apply soon. Thanks for stopping and commenting here.
Amazing Article. easy and understandable. Thanks For sharing
While creating a user account, just after the user enters the username, an AJAX call will request the PHP page at the server side to get the availability status of the username. The PHP page matches the user input against the database and returns the response text based on the availability.
Great things starting you. I have understood your matter former to and you are just too wonderful. I really like anything you have developed now, surely like anything you are saw and the way in which you about it. You style it enjoyable and you silent care for to keep it smart.
Thanks for sharing this helpful article.