• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 168
  • Last Modified:

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,

0
CementTruck
Asked:
CementTruck
1 Solution
 
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
 
CementTruckAuthor Commented:
mrichmon,

What about 2 select buttons, or links, instead of radio buttons, would that work?
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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
 
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now