Here is how to set the focus of a form field in a CFDIV or a CFWINDOW so that when triggered the user only has to start typing and is not forced to select a specific text field first. This is accomplished by placing a JavaScript function on the main page and using the AjaxOnLoad tag in the CFDIV or CFWINDOW to execute the function.

<script type="text/javascript">
   fnSetFocus=function() {
      document.getElementById("SetFocus").focus();
      document.getElementById("SetFocus").select();}
</script>

The first getElementById actually sets the focus to the specified ID, the second one selects or highlights any entries that may exist in that field as a result of previous data collection.

Inside the CFDIV or CFWINDOW (AjaxOnLoad is placed at the bottom and is executed as soon as the Ajax has completed loading):

<cfform action="#CGI.SCRIPT_NAME#" method="get" name="FormEmployee">
   <input name="NameFirst" type="text" id="SetFocus" value="" />
   <input name="NameLast" type="text" value="" />
   <input name="Submit" type="submit" value="SUBMIT" />
</cfform>

<cfset AjaxOnLoad("fnSetFocus")>

The OnLoad attribute in the CFFORM will not trigger a JavaScript call since it is inside either a CFDIV or CFWINDOW, because it is generated through Ajax. This is why the AjaxOnLoad call has to be used to reference a JavaScript function on the main page.

If you find this post useful please leave a comment and let me know how you used the information.

When presenting the user with several form fields to complete inside a CFDIV, it may be necessary to prevent them from pressing the enter key on the keyboard within the form. Here is the scenario, the form is expecting at least two text fields to be completed, but the user presses enter after the first one. You will have to anticipate this in the form data collection, but you were more concerned at the time with filtering the submission for erroneous characters or malicious submissions.

For each text field in the form, a JavaScript call to a function that blocks the captured keycode (13 for the enter key) will solve this problem. Why worry about this in a CFDIV? If you submit your form in a CFDIV and the entries are incomplete, the first reaction the user will have may be to press the browser back button. Since a CFDIV with a form is actually Ajax, there is nothing cached for the browser to back history.

Inside our main page is our JavaScript function:

<script type="text/javascript">
   fnNoEnter=function() {
      return !(window.event && window.event.keyCode==13);}
</script>

The form inside the CFDIV could be represented as the following:

<cfform action="#CGI.SCRIPT_NAME#" method="get" name="FormEmployee">
   <input name="NameFirst" type="text" onkeydown="return fnNoEnter();" value="" />
   <input name="NameLast" type="text" onkeydown="return fnNoEnter();" value="" />
   <input name="Submit" type="submit" value="SUBMIT" />
</cfform>

This level of input checking is client-side only and can be defeated if the user browser does not have JavaScript enabled. In a corporate setting, where each client browser is uniformly configured through a group policy however, it can be very effective.

If you find this post useful please leave a comment and let me know how you used the information.

Here is another piece of Ajax that could be very useful. This example will show you how to submit a form on a page to a CFDIV on the same page asynchronously. The first bit of business is our JavaScript using the "ColdFusion.Ajax.submitForm" function. This is the asynchronous part, meaning we don't actually change pages on the client side. That is, the results of the form are sent to a page on the server without building that page on the client side.

We have to use the CFFORM tag and not the regular HTML FORM tag for this to work. Well, that's not entirely true. Since we are not actually submitting the form through the Action attribute, you can use the FORM tag all you want. The real key is binding the form field by name to our CFDIV tag. Our submit button is actually just a regular button with an OnClick attribute to fire our JavaScript. Here's everything put together:

<html>
<head>
<title></title>
   <script type="text/javascript">
      fnSearch=function() {
         ColdFusion.Ajax.submitForm("FormSearch", "Result.cfm");}
   </script>
</head>

<body>
   <form method="get" name="FormSearch" id="FormSearch">
      <input name="Search" type="text" />
      <input name="Submit" type="button" onClick="fnSearch();" value="SEARCH" />
   </form>
   <cfdiv id="SearchResult" bind="url:Result.cfm?Search={Search}" />
</body>
</html>

Omitted from this example is the "Result.cfm" page, but it was only dumping the URL scope to observe the results of typing text into our search field and pressing the button.

If you find this post useful please leave a comment and let me know how you used the information.

Yes, you can make CSS style calls through JavaScript and apply them directly to tree nodes in an HTML format CFTREE, here's how. First, let's populate a query with some values so we can output information to our CFTREE. I chose to name my record names in my query results the same as the three corresponding attributes in the CFTREEITEM; display, value, and parent.

<cfscript>
   GetColor=QueryNew("display, value, parent");
   QueryAddRow(GetColor, 3);

   QuerySetCell(GetColor, "display", "Red", 1);
   QuerySetCell(GetColor, "value", "Red", 1);
   QuerySetCell(GetColor, "parent", "", 1);

   QuerySetCell(GetColor, "display", "Cardinal", 2);
   QuerySetCell(GetColor, "value", "Cardinal", 2);
   QuerySetCell(GetColor, "parent", "Red", 2);

   QuerySetCell(GetColor, "display", "Maroon", 3);
   QuerySetCell(GetColor, "value", "Maroon", 3);
   QuerySetCell(GetColor, "parent", "Red", 3);
</cfscript>

In the HEAD of our new document, we add the JavaScript function that our search results will use to expand our tree to the selected node and color the background of that selection.

<script type="text/javascript">
   fnTreeExpand=function(obj){
      GetTree = ColdFusion.Tree.getTreeObject("TreeData");
      GetNode = GetTree.getNodeByProperty("id", obj);
      GetNode.parent.expand();
      GetLeaf = ColdFusion.DOM.getElement(GetNode.data.spanid, GetNode.tree.id);
      GetLeaf.style.backgroundColor = "#33FF66";}
</script>

As the user clicks on a search result, it fires the "fnTreeExpand" function and sends it the current value of our tree item. The "TreeData" value is the name of our CFTREE (below). The function gets the node associated with the value sent to it, expands the parent (because it wouldn't be too useful if we didn't zero in on the selection for the user in a large tree). In this example we are setting the "spanid" around our node to a specific background color.

The BODY of our document contains our CFFORM and CFTREE tags and our search form.

<cfform name="FormTree" format="html">
   <cftree name="TreeData" format="html">
      <cfoutput query="GetColor">
         <cftreeitem value="#GetColor.value#" display="#GetColor.display#" parent="#GetColor.parent#" queryasroot="no" expand="no">
      </cfoutput>
   </cftree>
</cfform>
<form action="<cfoutput>#CGI.SCRIPT_NAME#</cfoutput>" method="post" name="SearchFile">
   Color Search
   <input name="SearchColor" type="text" />
   <input name="submit" type="submit" />
</form>

At the bottom of the page is the conditional check for the existence of a form submission. It loops over the query from the top of the page, which is included to show the structure expected from a more useful data source. If the search parameter is contained within a display result, then an anchor tag is generated with our "fnTreeExpand" JavaScript function call!

<cfif StructKeyExists(FORM, "SearchColor")>
   Select Color<br />
   <cfloop from="1" to="#GetColor.RecordCount#" index="LoopIndex">
      <cfif GetColor.display[LoopIndex] CONTAINS FORM.SearchColor>
         <a href="javascript:fnTreeExpand('<cfoutput>#GetColor.value[LoopIndex]#</cfoutput>');">
            <cfoutput>#GetColor.display[LoopIndex]#</cfoutput>
         </a><br />
      </cfif>
   </cfloop>
</cfif>

When you click on the anchor tag generated from the search, you'll end up with a green leaf in our tree.

If you find this post useful please leave a comment and let me know how you used the information.

When a user submits a form to a website, they don't always send the be best formed responses in the form fields. Take leading and trailing spaces for example. For whatever reason, some folks seem to rest on the long key before or after their thought is translated to the hands and they type the response.

When entering this information into a database, the best action to take is to just use the Trim() function around the form variable. This is particularly helpful if your code was expecting a number and not spaces (converting their response into a CHAR).

<cfqueryparam value="#Trim(FORM.SomeValue)#" cfsqltype="CF_SQL_VARCHAR">

Not every form submission goes into a database, but trimming the fields of leading or trailing spaces will still be necessary. Here is CFSCRIPT that uses the StructKeyExists() function to determine if a page has FORM submissions. Using DO and WHILE, the loop progresses through the FORM.FieldNames structure and replaces each entry with a trimmed value.

While we're at it, we are going to ReReplaceNoCase() any HTML tags that may have ended up in the form submission. Just place it into the onRequestStart of an Application.cfc page and let it take care of the rest.

<cffunction name="onRequestStart">
   <cfargument name="RequestName" required="yes" />
   <cfscript>
      //Automatic TRIM of all FORM field submissions
      if (StructKeyExists(FORM, "FieldNames") AND ListLen(FORM.FieldNames) GT 0) {
         FormIndex=0;
         do {FormIndex++;
            FORM[ListGetAt(FORM.FieldNames, FormIndex)]=Trim(FORM[ListGetAt(FORM.FieldNames, FormIndex)]);
            FORM[ListGetAt(FORM.FieldNames, FormIndex)]=REReplaceNoCase(FORM[ListGetAt(FORM.FieldNames, FormIndex)], "<[^>]*>", "", "ALL");}
         while (FormIndex LT ListLen(FORM.FieldNames));}
   </cfscript>
</cffunction>

The trim can be tested with a form page submission to itself with a CFDUMP of the form field and the Len() function.

<cfdump var="#Len(FORM.TestField)#">

<form action="<cfoutput>#CGI.SCRIPT_NAME#</cfoutput>" method="post">
   <input name="TestField" type="text" />
   <input name="submit" type="submit" />
</form>

Try this with and without the auto trim and see that the length of the TestField value will change with leading/trailing spaces.

If you find this post useful please leave a comment and let me know how you used the information.