Solved

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

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
OpenLDAP set password to expire 7 531
URL redirect 4 51
how can I temporarily cancel my monthly membership with Hostgator.com? 11 132
Web server settings related to keepalive 1 108
A web service (http://en.wikipedia.org/wiki/Web_service) is a software related technology that facilitates machine-to-machine interaction over a network. This article helps beginners in creating and consuming a web service using the ColdFusion Ma…
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…
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

911 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

17 Experts available now in Live!

Get 1:1 Help Now