HOME | FERGUSON Digital Blog
Sep 26

Prevent ENTER key from completing forms in CFDIV

ColdFusion , General Topics · By Michael Ferguson No Comments »

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.

Sep 11

Submit Asynchronous Form To CFDIV

ColdFusion · By Michael Ferguson 1 Comment »

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.

Sep 1

Highlight CFTREE Search Result

ColdFusion · By Michael Ferguson No Comments »

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.

Aug 29

Auto Trim Form Fields

ColdFusion · By Michael Ferguson No Comments »

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.

Aug 22

Ajax Replaceable Content

ColdFusion · By Michael Ferguson No Comments »

On my website (not the blog section), the menu items in the left column cause the content on the right to change without the page reloading. This was accomplished using a JavaScript function on the entry page to force navigation of a CFDIV using ColdFusion.navigate instead of a binding. The function ColdFusion.navigate requires two arguments, the URL and the ID of the specific CFDIV to display the URL content.

On the main page, in the HEAD, place the JavaScript function that each menu button will execute when the onClick event fires. Each button in your menu sends the URL information to the JavaScript function, which then sends it to the ColdFusion.navigate function and forces the CFDIV with your specific ID to load the new content using Ajax.

We add the bindonload attribute to the CFDIV tag so that our default content, encapsulated in the CFDIV, can call the JavaScript function with the first page to be loaded.

<script type="text/javascript">
   fnAjaxPage = function(obj) {
      ColdFusion.navigate(obj , "Category");}
</script>

<!-- MENU CHOICES -->
<input name="MenuButton1" type="button" value="Page One" onClick="fnAjaxPage('PageOne.cfm');" /><br />
<input name="MenuButton2" type="button" value="Page Two" onClick="fnAjaxPage('PageTwo.cfm');" />

<!--- AJAX CONTENT BEGIN --->
<cfdiv bindonload="false" id="Category">
   <script type="text/javascript">fnAjaxPage(ﾓPageOne.cfm");</script>
</cfdiv>

This example is based on the possibility of several different menu selections that will each result in a call to the ColdFusion.navigate function. This will cause the CFDIV to reload content without the entire page loading. Depending on the amount of content contained within the selected pages, the main page may shrink or grow with the amount of display information.

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

Previous Entries Next Entries
© Copyright 1997-2024, All Rights Reserved Coldfusion and MS SQL2008
Powered by Mango Blog.   Design by FERGUSON Digital
RSS Feeds