In this tutorial you will learn How to create a Username Availability Live check Script using jQuery Ajax and PHP, it's easy to create, i have used here $.ajax() you can also use $.post() method to create same script, flow is simple as user types preferred username in the input box then "$.ajax()" function calls an HTTP POST request dynamically and fetch the username from the MySQL Database Table through the PHP Script and shows that the username available or not all the functionality will done by "$.ajax()" keyup() event, have a look.
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.
just for testing insert some records in the table, paste below sql code to insert records
using $.ajax() function the code will be as follow :
using $.post() function the code will be as follow
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.
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.
i like this,
ReplyDeletethis is really helpful
thanks :)
You're welcome John ... :)
DeleteNot Found
ReplyDeleteThe requested URL /sitefiles/logup/index.php was not found on this server.
comes up when I try any of the other files as well...any thoughts that could help
please drop an actual and exact error or problem, so that i can help you to solve this issue, and please check "/sitefiles/logup/index.php" file is there or not .
DeleteHi Pradeep, I wanna ask you the question that. I am posting the data through the PHP MYSQLI direct and that form is updating the data. Its getting values and creating the exact query...! But not rendering the data updated...! Its throwing the old data not an update one. also in DB its not updating the data...! Any HINT...?
ReplyDeleteHello Saddam Hussain, please check again your code within "username-check.php" which you have updated with MySQLi, this will also work easily with MySQLi , if you found some error then show me your MySQLi code.
DeleteThank you for the scripts! It is really helpful for my blog project :)
ReplyDeleteYou're welcome Honey Jean,
Deletekeep visiting :)
Pradeep bhai
ReplyDeleteYou are great.You made php,mysql,ajax easier than ever.You are the master....nodoubt.I salute you.
Thank you, Adil, for your kind words. These words always inspires me to share my ideas with my readers. connect with us on social media.
Deletekeep visiting :)
thanks for all..the password confirmation is not working .
ReplyDeleteSMTP Error: Could not authenticate
dude now im just using wamp server.... not yet host it ..i have a doubt whether i need to host it for password confirmation .please let me know...
with regards
arun
Hello Arun, you can also use your gmail smtp(i used here) and try script at your localhost just give your gmail credentials...
Deletecheck the GMAIL security setting, if it set on High, change it to low and you will not get that error "SMTP Error: Could not authenticate"
Deletethanks for the suggestion...
DeleteI am unable to download the script please help me to download or send at [email protected]
ReplyDeleteThanks Pradeep
Hello there, i have updated downloading link, download it again...
DeletePradeep bhai.
ReplyDeleteKindly provide coding of 'comment box' with reply option as this one is(of blogger)
Thanks
Hi, im mostly using yours script only for my project. Very useful and easily can understand..Thank u so much. can you post this username availability live checkup using remote method?
ReplyDeleteThanks!
thanks bro it's amazing working
ReplyDeleteyou're welcome, chandu
Deletekeep visiting ...
Thank You sir,, It's really helpful to me. Thax again.
ReplyDeleteI just change the code little bit PDO to MySQLi Object-oriented. and it's work.
ReplyDeleteI have little less knowledge of PDO system so i do it in MySQLi Object-oriented .
Again Thanks Sir for your help. Hope you continued your support. thx
You're welcome, ankit...
Deletekeep visiting...
I figured out my problem with the connection error message. I needed to add a port assignment to my database name connection
ReplyDeleteThank You I merged this in with your login script :D
ReplyDelete