Need help using radio buttons to direct the flow of CF statements

Hello Experts,

I have a page that asks users to choose between 2 options (fork-in-the-road). Once the user clicks in the radio button of choice I want a specific <CFIF statement to start, thereby displaying the rest of the options on the page pertinent to the choice. At first I thought doing a CFIF, then CFELSE, but I thought I better ask you guys for a better solution first.

Thanks,

CementTruckAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mrichmonCommented:
Nope can't do that uness the page submits in between - not user friendly...

Instead you need javascript to determine which section to show.

Let me know if you are interested in that path...
CementTruckAuthor Commented:
mrichmon,

I am interested. Please elaborate.

"Nope can't do that uness the page submits in between - not user friendly..." Can you expound on this as well? At what point would you want it to resubmit?
CementTruckAuthor Commented:
mrichmon,

What about 2 select buttons, or links, instead of radio buttons, would that work?
Acronis True Image 2019 just released!

Create a reliable backup. Make sure you always have dependable copies of your data so you can restore your entire system or individual files.

mrichmonCommented:
Personally, I would never want them to have to re-submit.  The only submit should be when the form is complete and they submit the whole page.  It is much more user friendly than having it submit portions of the same page.  Also it works better with reset and back buttons to submit only once.

Radio, checkbox, selectbox, etc - doesn't matter.  All will work with javascript.

So you have all the content on the page, maybe like this:

<form name="myform" method="post" action="nextpage.cfm">
Please select the form to fill out:
<input type="radio" name="formselection" id="BirthdayForm" onClick="ShowForm();" value="Birthday"> Birthday Form<br>
<input type="radio" name="formselection" id="PartyForm" onClick="ShowForm();" value="Party"> Other Party Form<br>

<div id="Birthday" class="hide">
   Name of Birthday boy/girl:  <input type="text" name="birthdayperson"><br>
   Age <input type="text" name="Age"><br>
   Number of Guests <input type="text" name="BirthdayGuests"><br>
</div>

<div id="Party"  class="hide">
   Purpose of party:  <input type="text" name="partyreason"><br>
   Number of Guests <input type="text" name="PartyGuests"><br>
</div>

<input type="submit" name="SubmitForm" value="Submit Form">

</form>

Then in the head of the page this function:

function ShowForm()
{
   if(document.getElementById("BirthdayForm").checked)
  {
      document.getElementById("Birthday").className="show";
      document.getElementById("Party").className="hide";
   }
   else if(document.getElementById("PartyForm").checked)
  {
      document.getElementById("Birthday").className="hide";
      document.getElementById("Party").className="show";
   }
  else
   {
      document.getElementById("Birthday").className="hide";
      document.getElementById("Party").className="hide";
   }
}

ANd these styles
.hide {display: none;}
.show {display: block;}

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
istomtomCommented:
Easiest solution here is probably to use <div> layers and default them to style="display:none", this will hide them by default when the page loads. Make sure your div tags have an ID <div id="choice1" style="display:none; overflow:auto">content here</div>

Use an onClick on each radio button to pass the the ID of your div layer "choice1" or "choice2" into the javascript below which will toggle the visibility of the div layers.

onclick="ShowOrHide('choice1') will toggle the visibility of the div layer with ID choice1

function divToggle(D) {
var thediv = document.getElementById(D) ;
                  if(thediv.style.display == 'none') {
                        thediv.style.display = '';
                  } else {
                        thediv.style.display = 'none';
                  }
}
pcaiooCommented:
try use cflocation
<cfif form.page eq "a">
     <cflocation url="/A.html" addtoken="no">      
<cfelseif form.page eq "b">
     <cflocation url="/B.html" addtoken="no">
<cfelse>
     <cflocation url="/c.html" addtoken="no">
</cfif>
or even you can use cfinclude to include the whole page if they are cfm page.

in the form
<INPUT TYPE="radio" name="page " value="a">Page A
<INPUT TYPE="radio" name="page " value="b">Page B
<INPUT TYPE="radio" name="page " value="c">Page C
CementTruckAuthor Commented:
Thank you all for your subissions. Mrichmon's answer suited my application best.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.