Solved

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

Posted on 2006-07-05
5
302 Views
Last Modified: 2013-12-24
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>





0
Comment
Question by:djb80
5 Comments
 
LVL 13

Expert Comment

by:usachrisk1983
ID: 17046231
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
 
LVL 7

Expert Comment

by:ExpertAdmin
ID: 17052074
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
 
LVL 10

Accepted Solution

by:
js_vaughan earned 500 total points
ID: 17062530
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
 

Expert Comment

by:tribalboy3000
ID: 22799590
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
 
LVL 10

Expert Comment

by:js_vaughan
ID: 23068920
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

Featured Post

Portable, direct connect server access

The ATEN CV211 connects a laptop directly to any server allowing you instant access to perform data maintenance and local operations, for quick troubleshooting, updating, service and repair.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In our day to day coding, how many times have we come across a necessity to check whether a URL is a broken link or not? For those of you that answered countless and are using ColdFusion like myself, then this article is for you.  It will show yo…
One of the typical problems I have experienced is when you have to move a web server from one hosting site to another. You normally prepare all on the new host, transfer the site, change DNS and cross your fingers hoping all will be ok on new server…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

790 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