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 &nbsp;&nbsp;&nbsp;&nbsp;
     </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>





djb80Asked:
Who is Participating?
 
js_vaughanCommented:
I highly recommend using javascript as mentioned before.  Below is a sample script from O'Reilly's "Javascript & DHTML Cookbook".  I think it fits your situation perfectly.  If you like it, you might want to check the book out.



<html>
<head>
<title>Dynamic Form</title>

<script language="javascript">
<!--

  function togglePurDec(evt) {
 
    evt = (evt) ? evt : event;
    var target = (evt.target) ? evt.target : evt.srcElement;
    var block = document.getElementById("purchaseDecisionData");
   
    if (target.id == "purDecFlag1"){
      block.style.display = "block";
    } else {
      block.style.display = "none";
    }
   
  }

// -->
</script>

</head>
<body>

<form name="survey">

  <p>
    3. Do you make purchase decisions for your company?<br>
    <input type="radio" id="purDecFlag0" name="purchaseDecision" onClick="togglePurDec(event)">No
    <input type="radio" id="purDecFlag1" name="purchaseDecision" onClick="togglePurDec(event)">Yes
   
    <div id="purchaseDecisionData" style="display:none; margin-left:20px;">
      <p>
        3a. What is your purchase budget for the current fisical year?
        <select name="PurBudget">
          <option value="">Choose One:</option>
          <option value="1">Less than $50,000</option>
          <option value="2">$50,000-100,000</option>
          <option value="3">$100,000-500,000</option>
          <option value="4">$500,000+</option>
        </select>
      </p>
      <p>
        3b. What role do you play in the purchase decisions? (check all that apply)<br>
        <input type="checkbox" name="purRole1">Research<br>
        <input type="checkbox" name="purRole2">Recommend<br>
        <input type="checkbox" name="purRole3">Review Recommendations of Others<br>
        <input type="checkbox" name="purRole4">Sign Purchase Orders<br>
        <input type="checkbox" name="purRole5">None of the above<br>
      </p>
    </div>
 
  </p>
  <p>
    4. 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>
0
 
usachrisk1983Commented:
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.
0
 
ExpertAdminCommented:
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@

0
 
tribalboy3000Commented:
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.
0
 
js_vaughanCommented:
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

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.