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.

<cfinput type="button" name="step2A" value="Previous" onClick="accordion1.selectedIndex=0">

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:

<cfinput type="button" name="step2A" value="Previous" onClick="accordion1.selectedIndex=accordion1.selectedIndex-1">

Obviously a "Next" button would be slightly different.

Archived Comments

Comment 1 by Bradford posted on 3/7/2005 at 10:17 PM

Great example Ray. I've been try to figure out how to trigger the accordion pages from a cftree. Have you ever attempted that?

Comment 2 by Raymond Camden posted on 3/7/2005 at 10:18 PM

I'm assuming CFTREE has an onClick. It should be simple.

Comment 3 by Andy Allan posted on 3/7/2005 at 10:37 PM

Another great tip Ray. Thanks for all the cfform stuff you've posted so far.

Comment 4 by Bradford posted on 3/7/2005 at 11:44 PM

I did some digging. I looks like cftree has an onclick, but cftreeitem doesn't.

Comment 5 by phill.nacelli posted on 3/7/2005 at 11:47 PM

Great timing Ray.. I just email Mike Nimer on this.. actually.. the id attribute is missing in the documentation for &lt;cfformgroup /&gt; tag so that you can reference your tab bar/accordion component. Also, you can actually disable the other pages while going to the next tab (say you are forcing a wizard like navigation) by using:

&lt;cfinput type="button" name="step2A" value="Next" onClick="accordion1.getHeaderAt(selectedIndex+1).enabled=true;accordion1.selectedIndex=accordion1.selectedIndex+1" /&gt;

Comment 6 by Raymond Camden posted on 3/7/2005 at 11:55 PM

Bradford: I'm sure the onClick for cftree will tell you _which_ item though.

Comment 7 by Ben Densmore posted on 3/30/2005 at 3:59 AM

How do you name the accordion/tab? I don't see a property in the cfformgroup tag for naming them.

Thanks,
Ben

Comment 8 by Ben Densmore posted on 3/30/2005 at 4:06 AM

nevermind, I just noticed you can use the "id" attribute. For some reason that doesn't show up in DW as an option to use, I was trying to use name and that wouldn't work.

Ben

Comment 9 by Ray Camden posted on 3/30/2005 at 4:42 AM

That's what you get for using DW instead of CFEclipse. ;) (Sorry, couldn't help it.)

Comment 10 by Chris posted on 1/6/2006 at 9:27 PM

Is there a way so that when you click on the previous or next button it will go to the next tab AND go back to the top of the form? My form is pretty long and when you click on the next or previous button, it goes to the next tab, but it is still at the bottom of the form.

Comment 11 by Jonas posted on 7/30/2006 at 2:55 PM

This might be a bit of topic but will this work for cfgrid as well? I have been trying to figure out how to do recordsetpaging with cfgrid ala the exchange on the adobe website.

Comment 12 by Rod Kesselring posted on 12/4/2006 at 7:41 PM

I echo the question of Chris. I am looking for a way to push the form back to the top of the page... any ideas?