Check username in live using ajax and php

In this article I am going to show you how to Check the username and password in live using php and Ajax.

Live username checker for registration has become useful part of registration system. It allows visitor to check for availability of username before they can register on one’s site. This script however can also be used for other purpose, such as checking city name, baby name or other miscellaneous things. Today let’s learn how we can create this nifty little script that checks available username for registration using jQuery Ajax and PHP.

                                 

HTML

Let’s assume, below is our registration page, it contains username input field, and span HTML element with ID user-result to dump ajax results.

<div id=“registration-form”>
<label for=“username”>Enter Username :
<input name=“username” type=“text” id=“username” maxlength=“15”> <span id=“user-result”></span>
</label>
</div>

jQuery

The idea is to let user type a username and wait for him to stop typing, once the user stops typing we can make Ajax request to our PHP script, which connects to database and checks whether username is listed on the database.

As you can see in jQuery code below, it makes Ajax request to PHP page as soon as user stops typing, it is determined by the time elapsed after user stops typing, this way we make less Ajax requests.

<script type=“text/javascript”>
$(document).ready(function() {
var x_timer;
$(“#username”).keyup(function (e){
clearTimeout(x_timer);
var user_name = $(this).val();
x_timer = setTimeout(function(){
check_username_ajax(user_name);
}, 1000);
});

function check_username_ajax(username){
$(“#user-result”).html(‘<img src=”ajax-loader.gif” />’);
$.post(‘username-checker.php’, {‘username’:username}, function(data) {
$(“#user-result”).html(data);
});
}
});
</script>

PHP

Here’s PHP code that will connect to your database table and check whether the value actually exist or not.

<span class="kw1">if</span><span class="br0">(</span><span class="kw3">isset</span><span class="br0">(</span><span class="re0">$_POST</span><span class="br0">[</span><span class="st0">"username"</span><span class="br0">]</span><span class="br0">)</span><span class="br0">)</span>
<span class="br0">{</span>
<span class="kw1">if</span><span class="br0">(</span><span class="sy0">!</span><span class="kw3">isset</span><span class="br0">(</span><span class="re0">$_SERVER</span><span class="br0">[</span><span class="st_h">'HTTP_X_REQUESTED_WITH'</span><span class="br0">]</span><span class="br0">)</span> AND <span class="kw3">strtolower</span><span class="br0">(</span><span class="re0">$_SERVER</span><span class="br0">[</span><span class="st_h">'HTTP_X_REQUESTED_WITH'</span><span class="br0">]</span><span class="br0">)</span> <span class="sy0">!=</span> <span class="st_h">'xmlhttprequest'</span><span class="br0">)</span> <span class="br0">{</span>
<span class="kw3">die</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re0">$mysqli</span> <span class="sy0">=</span> <span class="kw2">new</span> mysqli<span class="br0">(</span><span class="st_h">'host'</span> <span class="sy0">,</span> <span class="st_h">'sql_username'</span><span class="sy0">,</span> <span class="st_h">'sql_pass'</span><span class="sy0">,</span> <span class="st_h">'database'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span> <span class="br0">(</span><span class="re0">$mysqli</span><span class="sy0">-&gt;</span><span class="me1">connect_error</span><span class="br0">)</span><span class="br0">{</span>
<span class="kw3">die</span><span class="br0">(</span><span class="st_h">'Could not connect to database!'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>

<span class="re0">$username</span> <span class="sy0">=</span> <span class="kw3">filter_var</span><span class="br0">(</span><span class="re0">$_POST</span><span class="br0">[</span><span class="st0">"username"</span><span class="br0">]</span><span class="sy0">,</span> FILTER_SANITIZE_STRING<span class="sy0">,</span> FILTER_FLAG_STRIP_LOW<span class="sy0">|</span>FILTER_FLAG_STRIP_HIGH<span class="br0">)</span><span class="sy0">;</span>

<span class="re0">$statement</span> <span class="sy0">=</span> <span class="re0">$mysqli</span><span class="sy0">-&gt;</span><span class="me1">prepare</span><span class="br0">(</span><span class="st0">"SELECT username FROM user_list WHERE username=?"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="re0">$statement</span><span class="sy0">-&gt;</span><span class="me1">bind_param</span><span class="br0">(</span><span class="st_h">'s'</span><span class="sy0">,</span> <span class="re0">$username</span><span class="br0">)</span><span class="sy0">;</span>
<span class="re0">$statement</span><span class="sy0">-&gt;</span><span class="me1">execute</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="re0">$statement</span><span class="sy0">-&gt;</span><span class="me1">bind_result</span><span class="br0">(</span><span class="re0">$username</span><span class="br0">)</span><span class="sy0">;</span>
<span class="kw1">if</span><span class="br0">(</span><span class="re0">$statement</span><span class="sy0">-&gt;</span><span class="me1">fetch</span><span class="br0">(</span><span class="br0">)</span><span class="br0">)</span><span class="br0">{</span>
<span class="kw3">die</span><span class="br0">(</span><span class="st_h">'&lt;img src="public/images/not-available.png" /&gt;'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="kw1">else</span><span class="br0">{</span>
<span class="kw3">die</span><span class="br0">(</span><span class="st_h">'&lt;img src="public/images/available.png" /&gt;'</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="br0">}</span>