steveeray.com - Submitting Flash Forms in CFMX 7

Submitting Flash Forms in CFMX 7

I started experimenting with the new Flash forms feature in Cold Fusion 7. My first attempt was to convert an HTML form on our Intranet that searches the phone directory by either name, phone number, or department. I decided to have each of these queries as a separate tabbed panel on the form. I first put one submit button for the whole form, but found that I could not determine which tab the user was on when they clicked it, because all fields on the form are sent. I then put a separate submit button on each tab, with a unique name, so I could query it's existence to determine where they clicked from. A screen shot of the form:

Once submitted, the database queried, and the results displayed, I wanted to re-display the form so they could do another search. Here I wanted to have the tab they submitted from be the selected tab on the form, with the previous search values still on the form. This was easily done by setting the selectedIndex attribute of the cfformgroup equal to the appropriate tab, which I could determine from the value of the submit field.

I was happy with this until a few test users asked why hitting the Enter key after typing in something did not work like the HTML form. This was true, the submit button must be clicked with the mouse to submit the form. I searched the MM forum and found a solution (submitted by Bartjan Meier) to capture the Enter key when pressed and submit the form programmatically with ActionScript code:

<cfinput type="text" name="lastname" label="Last"
 onKeyDown="if(Key.isDown(Key.ENTER)) {submitForm()}">

This did successfully work, but requires you to put the code for every text field on the form that the user may hit Enter on. Since I had few fields, I added this to the cfinput fields and it worked, partially. The form would be submitted, but because the submit button was not clicked, it does not get passed in the form collection. All the input fields were, but not the submit fields. As the value of the submit field was what I was using to determine which tab the user clicked on, I did not know which query to perform, let alone which tab to bring to the front when re-displayed.

I e-mailed a few gurus to see if there was a better solution. Unfortunately, the MM engineer responded: "There really is no good way to do this, however, it is a good enhancement request though." Great.

Since the input fields were being sent, I ended up creating a hidden field and programmatically setting its value to the appropriate tab when the form was submitted. Thus the onKeyDown code now became:

onKeyDown="if(Key.isDown(Key.ENTER)) {myform.thetab=0; submitForm()}"

with the value set to the appropriate tab, and the new hidden field at the end of the form:

<cfinput type="hidden" name="thetab" value="0">

This hidden field also had to be set if the user did click the submit button, so that code became:

<cfinput type="submit" width="100" name="searchname"
 value="Search" onclick="myform.thetab=0">

This is finally in a state where I'm happy with it, but this kind of behaviour with the Flash forms will give me another factor to consider on whether to use a Flash or HTML form in the future.

View Live Example
Download Source

Posted at April 7, 2005 08:53 PM

Comments

I have a little suggestion for an implementation with no hiddenField and only one submit button that is triggered onClick instead of using 'submitForm'. The function that evaluates the Key could be placed inside a cfsaveContent for better reuse
Cheers

Posted by: pim at April 11, 2005 12:16 PM

Submitting Flash Forms in CFMX 7

Archives