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:

<FONT COLOR=MAROON><cfform format=<FONT COLOR=BLUE>"flash"</FONT> name=<FONT COLOR=BLUE>"foo"</FONT> width=<FONT COLOR=BLUE>"400"</FONT>></FONT>

   <FONT COLOR=MAROON><cfsavecontent variable=<FONT COLOR=BLUE>"change"</FONT>></FONT>
      tabs.selectedIndex=chooser.selectedIndex;
   <FONT COLOR=MAROON></cfsavecontent></FONT>
   
   <FONT COLOR=MAROON><cfselect name=<FONT COLOR=BLUE>"chooser"</FONT> onChange=<FONT COLOR=BLUE>"#change#"</FONT> label=<FONT COLOR=BLUE>"Navigator"</FONT>></FONT>
      <FONT COLOR=NAVY><FONT COLOR=FF8000><option value=<FONT COLOR=BLUE>"1"</FONT>></FONT></FONT>Tab One<FONT COLOR=NAVY><FONT COLOR=FF8000></option></FONT></FONT>
      <FONT COLOR=NAVY><FONT COLOR=FF8000><option value=<FONT COLOR=BLUE>"2"</FONT>></FONT></FONT>Tab Two<FONT COLOR=NAVY><FONT COLOR=FF8000></option></FONT></FONT>
   <FONT COLOR=MAROON></cfselect></FONT>
   
   <FONT COLOR=MAROON><cfformgroup type=<FONT COLOR=BLUE>"tabnavigator"</FONT> id=<FONT COLOR=BLUE>"tabs"</FONT>></FONT>
   
      <FONT COLOR=MAROON><cfformgroup type=<FONT COLOR=BLUE>"page"</FONT> label=<FONT COLOR=BLUE>"Tab One"</FONT>></FONT>
         <FONT COLOR=MAROON><cfinput type=<FONT COLOR=BLUE>"text"</FONT> name=<FONT COLOR=BLUE>"textone"</FONT> label=<FONT COLOR=BLUE>"Text One"</FONT>></FONT>
      <FONT COLOR=MAROON></cfformgroup></FONT>

      <FONT COLOR=MAROON><cfformgroup type=<FONT COLOR=BLUE>"page"</FONT> label=<FONT COLOR=BLUE>"Tab Two"</FONT>></FONT>
         <FONT COLOR=MAROON><cfinput type=<FONT COLOR=BLUE>"text"</FONT> name=<FONT COLOR=BLUE>"texttwo"</FONT> label=<FONT COLOR=BLUE>"TextTwo"</FONT>></FONT>
      <FONT COLOR=MAROON></cfformgroup></FONT>
      
   <FONT COLOR=MAROON></cfformgroup></FONT>
<FONT COLOR=MAROON></cfform></FONT>

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