How To: Create ASP and AJAX username availability check example

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