Ask a Jedi: Changing a ColdFusion Flash Form "Page" Based on Drop Downs

August 9, 2005 coldfusion

(This post is more than 2 years old.)

A user on the CF irc channel asked about how a Flash Form "page" (a tab or accordion doohicky) can be updated based on a drop down. Turns out the code is rather simple:

<cfform format="flash" name="foo" width="400">

   <cfsavecontent variable="change">
      tabs.selectedIndex=chooser.selectedIndex;
   </cfsavecontent>

   <cfselect name="chooser" onChange="#change#" label="Navigator">
      <option value="1">Tab One</option>
      <option value="2">Tab Two</option>
   </cfselect>

   <cfformgroup type="tabnavigator" id="tabs">

      <cfformgroup type="page" label="Tab One">
         <cfinput type="text" name="textone" label="Text One">
      </cfformgroup>

      <cfformgroup type="page" label="Tab Two">
         <cfinput type="text" name="texttwo" label="TextTwo">
      </cfformgroup>

   </cfformgroup>
</cfform>

As you can see, the code is all of one line - we bind the selectedIndex of the tab group to the selectedIndex of the drop down. This assumes they are equal of course. The one thing to note - in order to get this to work you need to add an ID attribute to the tab navigator.