Solved

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

Posted on 2006-07-05
5
297 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

The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

Question has a verified solution.

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

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…
In a recent question (https://www.experts-exchange.com/questions/28997919/Pagination-in-Adobe-Acrobat.html) here at Experts Exchange, a member asked how to add page numbers to a PDF file using Adobe Acrobat XI Pro. This short video Micro Tutorial sh…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…

770 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