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?
 
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;}
0
 
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...
0
 
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?
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
CementTruckAuthor Commented:
mrichmon,

What about 2 select buttons, or links, instead of radio buttons, would that work?
0
 
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';
                  }
}
0
 
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
0
 
CementTruckAuthor Commented:
Thank you all for your subissions. Mrichmon's answer suited my application best.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.