How To: Create ASP and AJAX username availability check example

17 Jul, 2007 ASP/.NET, How To

So you’re using Classic ASP and you want to incorporate some AJAX into your scripts? No problem! The below example shows how easily it is to include a username availability check on your site using classic ASP and AJAX.

The below example checks the username after each key is pressed rather than when the form is submitted. You will need to create two files: ajax.asp and ajax_username.asp

You can download the sample source files at the bottom of this post

ajax.asp code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
	<TITLE>ASP and AJAX username availability check</TITLE>
	<script language="javascript">
	function OnChangedUsername()
	{
		if(document.form1.newuserid.value == "")
			{
				document.form1.btnCheckAvailability.disabled = true;
			}
		else
		{
			document.form1.btnCheckAvailability.disabled = false;
		}
	}
	function createRequestObject() {
		var ro;
		var browser = navigator.appName;
		if(browser == "Microsoft Internet Explorer"){
			ro = new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			ro = new XMLHttpRequest();
		}
		return ro;
	}

	var http = createRequestObject();

	function sndReq() {
		http.open('get', 'ajax_username.asp?username='+document.form1.newuserid.value);
		http.onreadystatechange = handleResponse;
		http.send(null);
	}

	function handleResponse() {
		if(http.readyState == 4){
			var response = http.responseText;
			var update = new Array();

			if(response.indexOf('|' != -1)) {
				update = response.split('|');
				document.getElementById("username_chk").innerHTML = update[0];
			}
		}
	}
	</script>
</HEAD>
<BODY>

<form method="post" action="javascript:void(0);" name="form1">
	<table>
		<tr>
			<td><input type="newuserid" name="newuserid" id="newuserid" size="20" onKeyUp="sndReq();" /></td>
		</tr>
		<tr>
			<td><input id="btnCheckAvailability" type="button" disabled="disabled" value="Check Availability" onClick="sndReq();"></td>
		</tr>
		<tr>
			<td><div ID="username_chk"></div></td>
		</tr>
		<tr>
			<td>Brought to you by <a href="http://strangework.com" target="_blank">Brad Williams</a></td>
		</tr>
	</table>
</form>

</BODY>
</HTML>

ajax_username.asp code:

<%
Set username = Request.QueryString("username")

'*** START - SET YOUR DNS-LESS CONNECTION VARIABLES
db_username = "username"		'DB username
db_password = "password"		'DB password
db_catalog = "database_name"		'DB name
dp_datasource = "192.168.1.1"		'DB IP
'*** END - SET YOUR DNS-LESS CONNECTION VARIABLES

Set conn = Server.CreateObject("ADODB.Connection")
conn.CommandTimeout = 0
c="Provider=SQLOLEDB.1;User ID=" & db_username & ";password=" & db_password & ";Initial Catalog=" & db_catalog & ";Data Source=" & dp_datasource & ";Use Procedure for Prepare=1;Auto Translate=True;Packet Size=4096"
conn.Open c

'*** ADJUST THIS SELECT QUERY TO CHECK THE USERNAME AGAINST YOUR MEMBERS TABLE
SQL = "SELECT username FROM table WHERE username='" & username & "' "
Set chk_username = Server.CreateObject("ADODB.Recordset")
chk_username.Open SQL, conn, 3, 3
If chk_username.EOF = False then
	response.write "USERNAME ALREADY TAKEN"
Else
	response.write "USERNAME IS AVAILABLE"
End if

chk_username.close
set chk_username = nothing

conn.close
set conn = nothing
%>

Just adjust the DSN-Less connection settings and the SELECT query above and your all set!

If you would rather check a username after the submit button is pressed just change this line:

to this:

DISCLAIMER - There is no error handling, form validation, or query injection functions or routines in this script. This is a basic username checking script. Be sure to include these features if you use this code!

Feel free to do whatever you would like with this code. If this helps then you might consider sending a link back to strangework.com!

click here to download both source files

Popularity: 24% [?]

Tags: AJAX, ASP, ASP/.NET, example, How To, script

9 Comments so far »

Briston said

am July 23 2007 @ 7:38 pm

excellent script.

thanks!
sethu said

am August 28 2008 @ 6:36 am

Nice code and works very fast.

Thanks for the code.

Regards
Sethu
Salan said

am October 21 2008 @ 2:04 am

Hi Brad,

You work looks awesome at least by reading the review and comments left on your blog by various people who have tested it. However I am very new to ASP and it will be a great help to me (and people like me) if you attach a sample MDB file too in your download link. I promise a link back to your site
Sam said

am October 23 2008 @ 4:43 pm

An awesome example, very straightforward! This helps me out TONS!! Salan, are you squared away with this?

-Thanks

Samuel
Astralis said

am February 14 2009 @ 1:45 pm

Fantastic! Thanks for sharing!
shmai said

am October 19 2009 @ 7:55 am

Hello!
I have develop another good script for retriving the data from Weather.com visit: http://www.weatherscripts.com

Regards,
shmai
Weather on your site said

am October 26 2009 @ 6:46 am

This is classic asp script will allow you to monitor your current local weather via a Weather.com XML feed.
It parses the XML data and then outputs formatted HTML. You need to acquire a Partner ID and License Key from Weather.com.
This service is completely free, and they only want your email. Visit this URL to sign up.
Memnoch said

am December 31 2009 @ 3:36 pm

I’ve been looking for this script for a long time. Thanks.
Ravi said

am February 19 2010 @ 3:28 pm

This example is a simple to understanding & its very useful to me.I promise a link back to your site

Thanks,
Ravi