Ajax powered ASP user signup form

This sample application lets your clients to check username before contiue to fill the sign up form. Rest of the code is a simple user signup form and stores the information to SQL Server.

Let's examine all code:

usernamecheck.js

var xmlHttp

function checkUsername(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
   var url="check.asp";
   url=url+"?username="+str;
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true);
   xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("userNameControlValue").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
}
return xmlHttp;
}

If you look at signup form page, you'll see that I have entered a simple ajax code. When a client hit "Check Availability" button, script send username input value to checkUsername function. Our Ajax/JavaScript codes are stored in usernamecheck.js file. And send value to check.asp file and retrieves the result. stateChanged function passes returned message form check.asp to our sign up form.
All we do with Ajax is send to check.asp file user input value and write message inside userNameControlValue div tag.

<%
    if request.form("formsubmit") = "true" then
   set cn= server.CreateObject("adodb.connection")
   cn.open "Provider=SQLOLEDB;Data Source=.\SQLEXPRESS;database=gnews2;uid=sa;pwd=123456;"

   uname = replace(trim(Request.QueryString("username")), "'", "''")
   password = replace(trim(Request.QueryString("password")), "'", "''")
   password1 = replace(trim(Request.QueryString("password1")), "'", "''")
   Dim strMsg
   Dim errs
   errs = 0
   if len(uname) < 6 then
       errs = errs + 1
       strMsg = strMsg & "The username must contain at least six characters.<br/>"
   elseif len(uname) > 25 then
       errs = errs + 1
       strMsg = strMsg & "The username must contain at most twentyfive characters.<br/>"
   end if

   if len(password) < 6 then
       errs = errs + 1
       strMsg = strMsg & "The password must contain at least six characters.<br/>"
   elseif len(password) > 10 then
       errs = errs + 1
       strMsg = strMsg & "The password must contain at most ten characters.<br/>"
   end if
   if errs = 0 then
   set r = cn.execute("select uname from users where uname like '"& uname &"'")
   if not r.eof then
       errs = errs + 1
       strMsg = strMsg & "<i>"& uname &"</i> is not available. Please try a different username.<br/>"
   end if
   end if
   if errs = 0 then
       cn.execute("insert into user (uname, pword) values ('"& uname &"', '"& password &"');")
       strMsg = "Your account created!<br/>"

        ' here you can create sessions and redirect user to user pages.

    end if

    end if
%>
<html>
<head>
    <title>User Sign Up Form</title>
    <script type="text/javascript" src="usernamecheck.js"></script>
    <style type="text/css">
        td, input { font:11px arial; }
    </style>

</head>
<body>
    <form action="signup.asp" method="post">

    <input type="hidden" name="formsubmit" value="true"/>
    <center>
    <table border="0">
    <tr>
    <td></td>
    <td>
    <%
        response.write strMsg
    %>
    <div id="userNameControlValue"><b></b></div>
    </tr>
    </tr>
    <tr>
    <td>Username:</td>
    <td>
    <input type="text" name="username" size="30"/>
    <input type="button" name="func" value="Check Availability" onclick="checkUsername(username.value);"/>
    </td>
    </tr>
    <tr>
    <td >Password:</td>
    <td>
    <input type="password" name="password" size="15"/>
    </td>
    </tr>
    <tr>
    <td>Password (retype):</td>
    <td>
    <input type="password" name="password1" size="15"/>
    </td>
    </tr>
    <tr>
    <td></td>
    <td><input type="submit" name="func" value="Sign Up"/></td>
    </tr>
    </table>
    </center>
</form>
</body>
</html>

Check.asp file is a simple ASP code and checks username input value. SQL query searches database and returns username is available or not.

<%
        username = replace(trim(Request.QueryString("username")), "'", "''")
        if len(username) > 0 then
        set cn= server.CreateObject("adodb.connection")
        cn.open "Provider=SQLOLEDB;Data Source=GZ\SQLEXPRESS;database=gnews2;uid=sa;pwd=123456;"
        sql = "select uname from users where uname like '"& username &"'"
        set r = cn.execute(sql)
        if r.eof then
            response.write "<br/><font color=""#006600"">Username <i>"& username &"</i> is available.</font>"
        else
            response.write "<br/><font color=""#fe0002"">Username <i>"& username &"</i> is not available. Please try a different username</font>"
        end if
        r.close
        set r = nothing
        cn.close
        set cn = nothing
        else
        response.write "<br/><font color=""#fe0002"">Please type your username.</font>"
        end if
%>

You may edit all source simply and can be used in a real application. ASP is enough suitable to work with Ajax.

Download all code.

Happy Coding

This sample application lets your clients to check username before contiue to fill the sign up form. Rest of the code is a simple user signup form and stores the information to SQL Server.