AJAX Username Availability Checker
While bringing back one of my websites, I had the need for a way to check to see if a username is available before the user submits the form. This provides a great user experience - as they don’t have to restart the form again after they find out their selected username is already taken!
Check out the DEMO.
Now, I searched and searched and couldn’t find one that worked correctly, or did what I wanted it to do. I found some that offered username suggestions if the desired username was taken, but that was beyond what I wanted to offer. I simply wanted a simple message to display after a user tabs or clicks out of the username field… the code I came up with was based on an Ajax Username Availability Checker at Shawngo.com. His didn’t exactly work in my implementation, so I modified it to work for me. The way it’s set now should work for pretty much anyone. I should note that Shanwgo.com also has a slick one that works by checking usernames in a CSV file using jQuery.
I can’t provide support for this, but I’m more than happy to share the code with you and hopefully it’ll save your day!
First, place the following code in the header of your registration page:
<script language="javascript" type="text/javascript">
/*This is the location of your PHP script*/ var url = "username.php?param=";
function updateName() { /* Print the message to use while checking the database: */ document.getElementById(\'checked\').innerHTML = "Checking..."; /* We\'re assuming your username input ID is "username" */ var name = document.getElementById("username").value; http.open("GET", url + escape(name), true); http.onreadystatechange = handleHttpResponse; http.send(null); }
function handleHttpResponse() { if (http.readyState == 4) { results = http.responseText; /* Again, we\'re assuming your username input ID is "username" */ var name = document.getElementById("username").value; /* If the username is available, Print this message: */ if(results == "") results = "<font color=\"green\"><i>"+name+"</i> Is Available!</font>"; document.getElementById(\'checked\').innerHTML = results; } }
function getHTTPObject() { var xmlhttp; if (!xmlhttp && typeof XMLHttpRequest != \'undefined\') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; } } return xmlhttp; } var http = getHTTPObject(); </script>
Alright, now that the JavaScript is there, we’ll create the PHP file to actually connect to the database and check if the username is there. Remember to change the first line in the JavaScript above to reflect what you name this file and where you store it in relation to your registration page. Right now, we’re assuming this php file and the registration page is in the root directory and called username.php
*NOTE: Please take the space out of the “< ?” in the opening PHP tag. My blog keeps adding it in for some reason…
< ?php$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die(’Error connecting to mysql’);
//// Change these to reflect your database details: ///////////////////
$dbhost = 'db host';
$dbuser = 'db username';
$dbpass = 'db password';
$dbname = 'db name';
mysql_select_db($dbname);
$u = addslashes($_GET['param']);
//// Change these to reflect your database details too: //////////////////
$query = “SELECT username FROM users_table WHERE username = ‘$u’”;
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$checked = $row['username'];
}
//// Now we’ll make the requested comparison in lowercase so that it’s correct: ///////////////////
$checked = strtolower($checked);
$u2 = strtolower($u);
//// Message to Print if the username is taken: ///////////////////
if($u2 == $checked) { echo “$u is Taken!”; }
mysql_close($conn);
?>
And lastly, we need to make the correct adjustments to our registration page HTML. You can also see the DEMO source code if you want to see it implemented.
On the input field that we’re checking, we’re assuming the ID on that element is “username”. See the JavaScript above if your name is different - you would need to change 2 lines in that code. Now, on that input tag, add the JavaScript onblur property like this:
Lastly, we need to create the div where the Available/Taken message will display. You can style this however you wish in your CSS:
That’s it! You’ve now got a registration sign-up form that automatically checks the username against your existing data to make sure the user knows right away if their choice is taken! Feel free to pass this script around, edit to your liking, or just send people on over to check it out for themselves.
If you do use this, or like it, or think people should know - please link back to this page so we can spread the love!
Tags: Scripts
3 Comments | Comment or Ping
Eric
Cool script dude, helped me out :)
Nov 9th, 2007
reymond
thanks a lot man!!!
Dec 19th, 2007
Sorin Spanu
Very useful script. Did my job.
Jan 10th, 2008