How to Implement Check Username Availability Feature With AJAX & JQuery?

0
Shares
How to Implement Check Username Availability Feature With AJAX & JQuery?
2 (40%) 1 vote

Check User Availability Example

Checking username availability is one of the useful parts of registration system. It basically allow visitors to check the availability of their desired username. Now we know that most visitors today basically sign up using Facebook or Twitter or Gmail.

But there are still a few visitor who opt for manual registration process.

So for grabbing those visitors, it is important that you add this feature as well in your registration process.

In this PHP tutorial, we’ll learn how to create the script that checks the username availability  for registration.

Let’s Get Started

We’ll need following things to build this demo:

  • Language: PHP
  • Server: Xampp/Wamp
  • Database: MySql

Set Character-set For View

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Include JS Library for using od scripting command

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

Create HTML page to check username available or not

<h2>Check live email availability Demo</h2>
<br>
<div class="content">
<table>
<tr>
<td>    Ex: <b><i>xyz@gmail.com</i></b><br /> <input type="text" placeholder="Username" name="username" id="username" /></td>
<td><div class="result" id="result"></div></td>
</tr>
</table>

For validation of form and check available or taken

<script type="text/javascript">
$(document).ready(function(){
$('#username').keyup(function(){
// alert('sds');
var username = $(this).val(); // Get username textbox using $(this)

var Result = $('#result'); // Get ID of the result DIV where we display the results

if(username.length > 2) { // if greater than 2 (minimum 3)
Result.html('Loading...'); // you can use loading animation here
var dataPass = 'action=availability&username='+username;
$.ajax({ // Send the username val to available.php
type : 'POST',
data : dataPass,
url  : 'available.php',
success: function(responseText){ // Get the result
//alert(responseText);
if(responseText == 0){
Result.html('<span class="success">Available</span>');
}
else if(responseText > 0){
Result.html('<span class="error">Taken</span>');
}
else{
alert('Problem with sql query');
}
}
});
}else{
Result.html('Enter atleast 3 characters');
}
if(username.length == 0) {
Result.html('');
}
});
});
</script>

In db.php file, we’ll check whether the connection is done or not.

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'ur48x');
define('DB_DATABASE', 'demousers');
$connection = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
if(!$connection)
{
echo 'something is wrong please check carefully';
die();
}

?>

>>> when keyup that time call ajax function with jquery
$('#username').keyup(function(){
});

>>> Here Used New File “available.php”
<?php
include_once('db.php');
if(isset($_POST['action']) && $_POST['action'] == 'availability')
{
if ($connection->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
else
{
$username       = mysqli_real_escape_string($connection,$_POST['username']); // Get the username values
//            echo $username;
//            echo "Connected successfully";
$query  = "select email from users3 where email='".$username."'";
$res    = mysqli_query($connection,$query);
$count  = mysqli_num_rows($res);
echo $count;

}
}

?>

Once you run the demo, you can write a username in the textbox to check it’s availability. We’ve added few records in database table.

Here’s what will look when you enter already taken username.

Step 1

And if you add a username that’s new, it will look like below:

Step 2

And we are done! Simple and neat, right?

If you’re wondering why we decided to write for a small detailed topic, well the reason is because we believe that taking care of each and every small detail adds value to the website.

And in case you need any help implementing this feature in your website or looking to hire PHP developer, you can contact us for the same.

You can download a free copy of check username availability demo from Github.

 
0
Shares
 

LET'S TALK VALIDATE YOUR IDEA!