Solved

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

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

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Join & Write a Comment

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…
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…
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

744 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

10 Experts available now in Live!

Get 1:1 Help Now