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

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Comments