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

Posted on 2006-04-26
Last Modified: 2013-12-24
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.


Question by:CementTruck
    LVL 35

    Expert Comment

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

    Author Comment


    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?

    Author Comment


    What about 2 select buttons, or links, instead of radio buttons, would that work?
    LVL 35

    Accepted Solution

    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 id="Party"  class="hide">
       Purpose of party:  <input type="text" name="partyreason"><br>
       Number of Guests <input type="text" name="PartyGuests"><br>

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


    Then in the head of the page this function:

    function ShowForm()
       else if(document.getElementById("PartyForm").checked)

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

    Expert Comment

    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( == 'none') {
                   = '';
                      } else {
                   = 'none';
    LVL 3

    Expert Comment

    try use cflocation
    <cfif eq "a">
         <cflocation url="/A.html" addtoken="no">      
    <cfelseif eq "b">
         <cflocation url="/B.html" addtoken="no">
         <cflocation url="/c.html" addtoken="no">
    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

    Author Comment

    Thank you all for your subissions. Mrichmon's answer suited my application best.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Suggested Solutions

    Have you ever sent email via ColdFusion and thought of tracking this mail to capture the exact date and time when the message was opened ?  If yes, then this article is for you ! First we need a table user_email with columns user_id , email , sub…
    Periodically we have to update or add SSL certificates for customers. Depending upon your hosting plan you may be responsible for the installation and/or key generation. In the wake of Heartbleed many sites were forced to re-key. We will concen…
    Migrating to Microsoft Office 365 is becoming increasingly popular for organizations both large and small. If you have made the leap to Microsoft’s cloud platform, you know that you will need to create a corporate email signature for your Office 365…
    Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now