This is Simple Tutorial contains two PHP files one is main “index.php” file contains jQuery/javascript Code and simple HTML Form, and second is “username-check.php” file which is called dynamically via $.ajax() POST request and displays username is available or not.
copy paste following sql code in your phpMyAdmin to create database and table.
CREATE TABLE `users` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`user_name` VARCHAR( 25 ) NOT NULL
) ENGINE = MYISAM ;
just for testing insert some records in the table, paste below sql code to insert records
INSERT INTO `dbtest`.`users` (`id`, `user_name`) VALUES (NULL, 'pradeep'), (NULL, 'CodingCage');
using $.ajax() function the code will be as follow :
$.ajax({
type : 'POST',
url : 'username-check.php',
data : $(this).serialize(),
success : function(data)
{
$("#result").html(data);
}
});
using $.post() function the code will be as follow
$.post("username-check.php", $("#reg-form").serialize())
.done(function(data){
$("#result").html(data);
});
index.php
contains jQuery/javaScript code with HTML Form, when user types username in input box then keyup() event will executes and as name was typed it will send ajax POST request to “username-check.php” file and displays that the username is available or not
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live Username Availability Check using PHP PDO and jQuery</title>
<script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#name").keyup(function()
{
var name = $(this).val();
if(name.length > 3)
{
$("#result").html('checking...');
/*$.post("username-check.php", $("#reg-form").serialize())
.done(function(data){
$("#result").html(data);
});*/
$.ajax({
type : 'POST',
url : 'username-check.php',
data : $(this).serialize(),
success : function(data)
{
$("#result").html(data);
}
});
return false;
}
else
{
$("#result").html('');
}
});
});
</script>
</head>
<body>
<form id="reg-form" action="" method="post" autocomplete="off">
<fieldset>
<div>
<input type="text" name="name" id="name" placeholder="Username" />
<span id="result"></span>
</div>
</fieldset>
</form>
</body>
</html>
username-check.php
this one is simple PHP file which contains only PHP code and works silently at backend of main file and calls via $.ajax() function.
<?php
$host="localhost";
$user="root";
$pass="";
$dbname="dbtest";
$dbcon = new PDO("mysql:host={$host};dbname={$dbname}",$user,$pass);
if($_POST)
{
$name = strip_tags($_POST['name']);
$stmt=$dbcon->prepare("SELECT user_name FROM users WHERE user_name=:name");
$stmt->execute(array(':name'=>$name));
$count=$stmt->rowCount();
if($count>0)
{
echo "<span style='color:brown;'>Sorry username already taken !!!</span>";
}
else
{
echo "<span style='color:green;'>available</span>";
}
}
?>
style.css
@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
#reg-form
{
margin:100px auto;
padding:25px;
border:solid #cfcfcf 1px;
width:50%;
background:#f9f9f9;
}
fieldset
{
padding:5px;
width:60%;
margin:0 auto;
border:0;
}
input
{
width:100%;
height:35px;
border:solid #00a2d1 1px;
padding-left:10px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
font-size:15px;
}
span
{
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
font-size:15px;
}
that’s it guys, we have covered here a simple jQuery Username Availability Checker Script so download and try and if you are facing any issue with this script please feel free to ask.