JQuery Username Availability Live Check with PHP and Ajax

Want to check the Username availability for your membership site without re-loading the Page using AJAX JQuery and MySQL database with PHP? If Yes is your answer you definitely need to read this post.

Overview

To continue in this tutorial we will need the files mentioned below,

  • Index.php
  • Style.css
  • Username-Check.php
  • jquery-1.11.3-jquery.min.js

Database Schema

Adding a table

--
-- Database: `dbtest`
--
CREATE TABLE `users` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`user_name` VARCHAR( 25 ) NOT NULL
) ENGINE = MYISAM ;

Inserting values into table

INSERT INTO `users` (`id`, `user_name`) VALUES (1, 'lplp');

You can add some more data to the table according to need.

Index.php

This file contains the code which imports CSS codes from “style.css” file,
Render a form which is needed to input data by the user, also this contains the Ajax code which takes the input and validates it by passing it to “username-check.php” file. You need to import the JQuery library in order to make the AJAX code work Properly.

<!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>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript">

$(document).ready(function()
{
$("#name").keyup(function()
{
var name = $(this).val();

if(name.length > 3)
{
$("#result").html('Validating');

$.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>

Style.css

This file contains the styling code which is used to render the form in index.php file.

@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;
}

Username-Check.php

Username-Check.php file contains the code which is needed to take the data from index.php and run a query against the MySQL to validate if data is already present in the database. When AJAX code sends data with the method POST to the server side file (current file) it extracts the data and then sends them to validate with the database. If the database sends result, the code will show that the Username is already taken.

<?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;'>Username is not available</span>";
}
else
{
echo "<span style='color:green;'>Username Available</span>";
}
}
?>

Jquery-1.11.3-jquery.min.js

This is the jQuery library which we need to import in order to make the AJAX functions work.

<script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>

Download The codes here.

Download the complete source code.

Grab the the free working demo Intantly!

You have Successfully Suscribed!

Leave a Reply

Your email address will not be published. Required fields are marked *