CFForm Tip

Working with tabs/accordions? Want to add buttons to let the user go back and forth to different pages? You can do this by simply setting the selectedIndex on the tab/accordion. Assuming your accordion has the name accordion1, this button will send you to page 1.

<FONT COLOR=MAROON><cfinput type=<FONT COLOR=BLUE>"button"</FONT> name=<FONT COLOR=BLUE>"step2A"</FONT> value=<FONT COLOR=BLUE>"Previous"</FONT> onClick=<FONT COLOR=BLUE>"accordion1.selectedIndex=0"</FONT>></FONT>

Obviously if you want to go from page 3 to page 2, selectedIndex would be set to 1. You could probably rewrite this to sniff the current active page and just set it to a value one less.

In fact, I shouldn’t be so lazy. Here is the “proper” version:

<FONT COLOR=MAROON><cfinput type=<FONT COLOR=BLUE>"button"</FONT> name=<FONT COLOR=BLUE>"step2A"</FONT> value=<FONT COLOR=BLUE>"Previous"</FONT> onClick=<FONT COLOR=BLUE>"accordion1.selectedIndex=accordion1.selectedIndex-1"</FONT>></FONT>

Obviously a “Next” button would be slightly different.

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.

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

Comments