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
Great example Ray. I've been try to figure out how to trigger the accordion pages from a cftree. Have you ever attempted that?
I'm assuming CFTREE has an onClick. It should be simple.
Another great tip Ray. Thanks for all the cfform stuff you've posted so far.
I did some digging. I looks like cftree has an onclick, but cftreeitem doesn't.
Great timing Ray.. I just email Mike Nimer on this.. actually.. the id attribute is missing in the documentation for <cfformgroup /> 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:
<cfinput type="button" name="step2A" value="Next" onClick="accordion1.getHeaderAt(selectedIndex+1).enabled=true;accordion1.selectedIndex=accordion1.selectedIndex+1" />
Bradford: I'm sure the onClick for cftree will tell you _which_ item though.
How do you name the accordion/tab? I don't see a property in the cfformgroup tag for naming them.
Thanks,
Ben
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
That's what you get for using DW instead of CFEclipse. ;) (Sorry, couldn't help it.)
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.
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.
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?