Checking availability of user name with AJAX

Lately I’ve been writing quite much about AJAX, but it is so useful that I’m sure it is of everyone’s interest!

In this post I will show you – as the post title says – an example script of AJAXed registration form, without recurring to AJAX frameworks (there are already many tutorials about this topic in relation with them). The example omits the synchronous part of the registration and focuses on the user name, which we want to asynchronously check. It doesn’t sound so weird if I say it in other words: check on the fly if the user name the person is typing already exists in the database or not, and take actions depending on whether it does or not (for instance, only allow form submission if name is available).

This is the basis for other types of effects like for instance searching contents and dynamically returning result suggestions, or checking if a specific word exists in the database, etc. but as I mentioned, here the intention is to use it on a registration form.

First of all, check the demo of the script here.

Let me point out two things you might have noticed:

• Names of 3 or less characters are not checked.
• Names are checked only after finishing writing.

What’s the point for this? The answer is, filtering the queries.

The required number of characters is useful because most user registration forms ask the user for a longer name than just ‘abc’. It is also useful to filter out useless queries to the database for names which are not allowed because they’re too short.

Checking the names once the user finished writing is useful depending on the event which triggers the name check. In the example, the event is onkeyup and this would normally mean querying the server each time the user has typed a character (excessive!). By using this filter however, there must have been a certain time of inactivity for the script to fire; otherwise the user is considered to still be typing in and therefore there’s no need to query the server for every new character. Some events like onchange do not really need this filter.

Now let’s see the script in detail, for which two files are needed:

• index.html
• check.php

index.html

<script type="text/javascript"><!--

// Custom settings

var minlength = '3';  // Set to minimum required characters as specified in your form
var delay = '1000';  // Time of inactivity to check. Always in milliseconds! (1 sec = 1000 millisec.)
var divid = 'username_exists';  // ID of the DIV where response will be shown

// Wait for user to finish typing

function timeoutUsernameCheck(){
if(window.mytimeout) window.clearTimeout(window.mytimeout);
window.mytimeout = window.setTimeout("toggle_username()", delay);
return true;
}

// Check availability

function toggle_username() {

if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http = new ActiveXObject("Microsoft.XMLHTTP");
}

handle = document.getElementById('username');
var url = 'check.php?';
if(handle.value.length > minlength) {

// Timestamp for preventing IE caching the GET request

fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();

var fullurl = url + 'do=check_username_exists&username=' + encodeURIComponent(handle.value) + '&timestamp=' + timestamp;

http.open("GET", fullurl, true);
http.send(null);
http.onreadystatechange = statechange_username;
}else{
document.getElementById(divid).innerHTML = '';
}
}

// Show availability

function statechange_username() {
if (http.readyState == 4) {

var html = http.responseText;

document.getElementById(divid).innerHTML = html;
}
}
// --></script>

Is the username available?
<div id="wrapper">
<div id="left" style="float: left; margin-right: 8px;">
<form>
<label style="margin-right: 6px;" for="username">User name: </label>
<input id="username" style="display: inline;" onkeyup="timeoutUsernameCheck()" name="username" size="20" type="text" />
</form></div>
<div id="username_exists" style="display: inline; font-size: 11px; font-weight: bold; color:#FF3300"></div>
</div>

The function called by the event onkeyup of the input field is timeoutUsernameCheck(). This function is one of the two filters mentioned above; it checks whether the user finished typing the name or not before triggering the checking process. It is difficult to know, when the event is onkeyup, the exact moment a user finishes typing (easier to know for instance with events onchange and onblur, or making the user click a button to check). So what we do with this function is assume that the user finished writing if he is more than X seconds inactive at typing. A recommended value here is around 1 second (1000 milliseconds), but of course any value can be used; this value is suggested because normally people do not take so long to type in the next character. The smaller the value is, normally the more times the script will run and check the database for matching names, but also the faster the user will know whether the name is available or not. One must find the adequate balance for each site’s needs.

check.php

// Connect to MySQL DB

mysql_connect ('localhost', 'user', 'pass');
mysql_select_db('dbname');

$do = $_GET['do'];
switch($do) {
case 'check_username_exists':
if(!get_magic_quotes_gpc()) {
$username = addslashes($_GET['username']);
}else{
$username = $_GET['username'];
}
$count = mysql_num_rows(mysql_query("SELECT * FROM login WHERE username='".$username."'"));
if($count > 0) {

// User name not available
echo '<img src="cross.jpg" alt="" width="22" height="22" />';
}else{

// User name available

echo '<img src="check.jpg" alt="" width="22" height="22" />'

}
break;
default:
echo 'No action specified.';
break;
}
?>

There’s nothing special in this part of the code, it is a quite simple PHP script. First of all it connects to the MySQL database where the user names are recorded; then it checks what operation we want to do (check_username_exists), and if this is specified in the GET variables passed with the URL, the database is checked for matching names. Then it returns one of two possible responses: either name is available (no matching names) or it is not available (the name already exists in the database).

In the demo, the response is not textual but a small image: a green check mark indicates that the name is available, whereas a red cross indicates the name is already taken. Further actions can be coded.

Finally, I believe it is a good idea to check again whether the username is available or not when the registration is submitted. This is because in pages with very frequent registrations, a username might be taken by user Y while user X is still filling in the registration form after having received the message that the username he chose is available.

The images used for the demo can be found here:

• cross.jpg
• check.jpg

Related posts:

• OpenCart: display stock levels in storefront, as numbers or colour icons