I've been trying for some time trying to get various examples that I've found online how to do this, but none seem to do any checking after I leave the input field that contains the username to be checked. I'll first post the link to my work in progress and then post my code to my .cfm and .cfc pages.
new_user.cfm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New User Registration</title>
<link href="main.css" rel="stylesheet" type="text/css" media="screen, handheld" />
</head>
<body>
<div align="center">
<img class="vetimg" src="images/Color_Logo_Original.jpg" /> <br />
<div class="title">Mobile Veterinary Assistant</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
chkUsernameUnique = function(theUsername){
$.getJSON("assets/cfc/userchecker.cfc", {
method: &<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;chkUsername&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;,
Username: theUsername,
returnformat: &<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;json&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;
}, function(isUsernameUnique){
if (isUsernameUnique == true) {
$("<a class="_hootified" a="" href="#" #theerrordivid"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#theErrorDivID"}); document.body.dispatchEvent(e); return false;">#theErrorDivID</a>").html(&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;Username is unique&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;);
}
else {
$("<a class="_hootified" a="" href="#" #theerrordivid"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#theErrorDivID"}); document.body.dispatchEvent(e); return false;">#theErrorDivID</a>").html(&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;Please select a new username&<a class="_hootified" a="" href="#" #039"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#039"}); document.body.dispatchEvent(e); return false;">#039</a>;);
}
});
};
</script>
<cfform action="nu_process.cfm" method="post" name="newuserform">
<div align="center">
<table>
<tr>
<td>Username:</td>
<td><cfinput type="text" name="Username" onchange="chkUsernameUnique(this.value);" required="yes" />
<div id="theErrorDivID"></div>
</td>
</tr>
<tr>
<td>Password:</td>
<td><cfinput type="password" name="Password" required="yes" /></td>
</tr>
<tr>
<td>Email:</td>
<td><cfinput type="text" name="Email" required="yes" /></td>
</tr>
<tr>
<td>First Name:</td>
<td><cfinput type="text" name="Owner_First_Name" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><cfinput type="text" name="Owner_Last_Name" /></td>
</tr>
<tr>
<td>Address:</td>
<td><cfinput type="text" name="Owner_Address" maxlength="95" size="95" /></td>
</tr>
<tr>
<td>City:</td>
<td><cfinput type="text" name="Owner_City" maxlength="95" size="95" /></td>
</tr>
<tr>
<td>State:</td>
<cfquery name="getState" datasource="dsl13_mva">
SELECT * FROM State
</cfquery>
<td><cfselect name="Owner_State"> <cfoutput query="getState">
<cfif getState.CurrentRow is 1>
<option value="#getState.id#" selected>#getState.abbr# | #getState.StateName#</option>
<cfelse>
<option value="#getState.id#">#getState.abbr# | #getState.StateName#</option>
</cfif>
</cfoutput> </cfselect></td>
</tr>
<tr>
<td>Postal Code:</td>
<td><cfinput type="text" name="Owner_Postal_Code" /></td>
</tr>
<tr>
<td>Phone:</td>
<td><cfinput type="text" name="Owner_Phone" mask="(999) 999-9999" /></td>
</tr>
</table>
<cfinput type="submit" name="submit" />
</div>
</cfform>
</body>
</html>
userchecker.cfc
<cfcomponent>
<cffunction name="chkUsername" access="remote" returnformat="json" output="false">
<cfargument name="Username" required="true">
<cfquery name="chkUsername" datasource="dsl13_mva">
SELECT ID FROM Pet_Owner WHERE username = <cfqueryparam value="<a class="_hootified" a="" href="#" #arguments"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#arguments"}); document.body.dispatchEvent(e); return false;">#arguments</a>.Username#" cfsqltype="cf_sql_varchar" />
</cfquery>
<cfreturn yesNoFormat(chkUsername.recordCount) / />
</cffunction>
</cfcomponent>
Thanks to anyone in advance that can help me figure out why my code doesn't seem to be working. If you want to test some usernames that are in the database a couple I have are admin and dustin.lennon.