asked on

Need a way to give users a choice after radio is selected

I would like some Javascipt that would give the user a choice
of [viewable form] or [updatable form] after they click on a radio.

I can't think of a way to do it. Any suggestions?

<script>
function fncVersion()
{
confirm("Instead of [OK] and [Cancel] I would like [viewable form] [updatable form]");
}
</script>

<cfform>

<tr>
<td colspan=3 class="reg10sl" valign="top">
FORM<br>
</td>
<td class="reg10sl" valign="top">

              <input type="radio" name="WorldPremiere" id="WorldPremiere1" Value=1 onClick="fncVersion()">Yes     
</td>
</tr>

</cfform>
<!---
<tr>
<td width="50%" height="30">
                        <input type="checkbox" value="1" name="cid3" onClick="RecSelected()">
                                                <b><font face="Arial" size="2">First CID</font></b>
                                    </td>
                                    </tr>
                                    <tr>                                    <td width="50%" height="30">
                        <input type="checkbox" value="1" name="cid4" onClick="RecSelected()">
                                                <b><font face="Arial" size="2">Second Cid</font></b>
                                    </td></tr>
</cfform>

usachrisk1983

Don't think it can be done with CF specifically, you may want to post a pointer in the JS section of EE (since it's more JS than it is CF). If it were me, I would do a popup remote control window to ask the user, or pose the question before they submit the form.

ExpertAdmin

Well, I agree with usachrisk1983 if you are set on using JavaScript. But if you use a Post event to reload the page when they click the radio button, you can easily do this. It just takes another round-trip to the server and causes a page reload but that is normal operation for a web application.

M@

ASKER CERTIFIED SOLUTION

js_vaughan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

tribalboy3000

How would you write the code if you had to do this for more than 2 radio choices. For instance if you had 5 radio buttons and for each selection there was 5 different options.

Thanks in advance.

js_vaughan

Below is some updated code to handle multiple selections. It requires a custom function (getElementsByClassName) that I obtained from http://www.robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/

<html>
<head>
<title>Dynamic Form</title>
<script type="text/javascript" language="javascript" src="./getElementsByClassName.js"></script>
 
<script type="text/javascript" language="javascript">
<!--
 
  function togglePurDec(blockID) {
 
    var divs = getElementsByClassName('purchaseClass','div',document.getElementById("purchaseDivs"));
 
    for (i=0; i<divs.length; i++) {
      if (divs[i].id == blockID){
        divs[i].style.display = "block";
      } else {
        divs[i].style.display = "none";
      }
  }
    
  }
 
// -->
</script>
 
</head>
<body>
 
<form name="survey">
 
  <p>
    Which question set would you like to load?<br>
    <input type="radio" name="purchaseDecision" value="1" onClick="togglePurDec('purchaseDecisionData1')"> 1<br>
    <input type="radio" name="purchaseDecision" value="2" onClick="togglePurDec('purchaseDecisionData2')"> 2<br>
    <input type="radio" name="purchaseDecision" value="3" onClick="togglePurDec('purchaseDecisionData3')"> 3<br>
    <input type="radio" name="purchaseDecision" value="4" onClick="togglePurDec('purchaseDecisionData4')"> 4<br>
    <input type="radio" name="purchaseDecision" value="5" onClick="togglePurDec('purchaseDecisionData5')"> 5<br>
    
    <div id="purchaseDivs">
      <div class="purchaseClass" id="purchaseDecisionData1" style="display:none; margin-left:20px;">
        <p>Section 1 (5 questions)</p>
      </div>
    
      <div class="purchaseClass" id="purchaseDecisionData2" style="display:none; margin-left:20px;">
        <p>Section 2 (5 more questions)</p>
      </div>
    
      <div class="purchaseClass" id="purchaseDecisionData3" style="display:none; margin-left:20px;">
        <p>Section 3 (5 different questions)</p>
      </div>
    
      <div class="purchaseClass" id="purchaseDecisionData4" style="display:none; margin-left:20px;">
        <p>Section 4 (5 simple questions)</p>
      </div>
    
      <div class="purchaseClass" id="purchaseDecisionData5" style="display:none; margin-left:20px;">
        <p>Section 5 (5 hard questions)</p>
      </div>
    </div>
  </p>
  <p>
    6. How long have you been at your current employment position?
    <select name="emplLen">
      <option value="">Choose One:</option>
      <option value="1">Less than 6 months</option>
      <option value="2">6-12 months</option>
      <option value="3">1-2 years</option>
      <option value="4">2+ years</option>
    </select>
  </p>
 
</form>
 
</body>
</html>

Open in new window