?
Solved

Populate a Dropdown list dynamically based on a radio group selection

Posted on 2003-03-31
7
Medium Priority
?
439 Views
Last Modified: 2013-12-24
Hi,

What I want to do is have a couple of radio buttons that populate a drop down list with values from a query when one of them is checked eg. if radio button 1 is checked populate with query 1 and if radio button 2 is checked populate with query 2.

The following is the code I am using so far. I understand that I need to use javascript in the onchange event in the radio group but I don't know anything about javascript.

<tr>
      <td><p>
          <label>
          <input type="radio" name="AreaSelect" value="TLA">
          <font size="2" face="Verdana, Arial, Helvetica, sans-serif">TLA</font></label>
          <br>
          <label>
          <input type="radio" name="AreaSelect" value="NHU">
          <font size="2" face="Verdana, Arial, Helvetica, sans-serif">NHU</font></label>
          <br>
        </p></td>
    </tr>

The queries I want to use to populate the drop down are qGetTLAList and qGetNHULIst. How do I then use them to populate the list?

Any adavice that can be given will be greatly apprieciated.

Thanks in advance, Dan
0
Comment
Question by:danimal_c
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 11

Accepted Solution

by:
hart earned 152 total points
ID: 8243696
now is the dropdown list on the same page..

and are you going to submit the page on selecting a radio option.

If yes then its easy all you have to do is submit the page onclick of the radiobutton. and fire the query using the value of this radio button and form the slect box using cfloop / cfoutput(query).
i.e

<script language="javascript">
function callme()
{
 if((document.frm.AreaSelect[0].checked==false) && (document.frm.AreaSelect[1].checked==false))
 {
  alert("Kindly opt for one of the options")
  document.frm.AreaSelect[0].focus();
  return false;
 }
 else
 {
  document.frm.submit();
 }
}
</script>
<form name="frm" action="samepage.cfm" method="post">
<tr>
     <td><p>
         <label>
         <input type="radio" name="AreaSelect" value="TLA" onclick="javascript:callme()" <cfif isdefned('AreaSelect') and AreaSelect eq 'TLA'>checked</cfif>>
         <font size="2" face="Verdana, Arial, Helvetica, sans-serif">TLA</font></label>
         <br>
         <label>
         <input type="radio" name="AreaSelect" value="NHU" onclick="javascript:callme()" <cfif isdefned('AreaSelect') and AreaSelect eq 'NHU'>checked</cfif>>
         <font size="2" face="Verdana, Arial, Helvetica, sans-serif">NHU</font></label>
         <br>
       </p></td>
   </tr>
   <td><p>
         <label>
         <font size="2" face="Verdana, Arial, Helvetica, sans-serif">Select Box</font></label>
         <br>
         <cfif not isdefined('AreaSelect')>
           <select name="selectbox" disabled>
             <option>-------</option>
           </select>
         <cfelse>
           <cfquery name="qGet#AreaSelect#List">
             qGet#AreaSelect#List
           </cfquery>
           <select name="selectbox">
             <cfoutput query="qGet#AreaSelect#List">
              <option value="#Evaluate('qGet#AreaSelect#List.fieldname')#">#Evaluate('qGet#AreaSelect#List.fieldname')#</option>
             </cfoutput>
           </select>
         </cfif>
    </p></td>
   </tr>
</form>


If you don't want to submit your page, then i can give you a javascript solution.

Let me know....

Regards
Hart

0
 
LVL 14

Assisted Solution

by:Renante Entera
Renante Entera earned 148 total points
ID: 8243852
Try this code of mine. I hope this will help you.

<cfparam name="QuerySelected" default="Query1">
<cfquery name="Query" datasource="PersonalRecords">
  <cfif QuerySelected eq 'Query1'>
    select fieldname as field from Table1
  <cfelse>
    select fieldname as field from Table2
  </cfif>
</cfquery>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input type="radio" name="AreaSelect" value="TLA" onClick="document.location='radio.cfm?QuerySelected=Query1'" <cfif QuerySelected eq 'Query1'>checked</cfif>></td>
  </tr>
  <tr>
    <td><input type="radio" name="AreaSelect" value="NHU" onClick="document.location='radio.cfm?QuerySelected=Query2'" <cfif QuerySelected eq 'Query2'>checked</cfif>></td>
  </tr>
  <tr>
    <td>
     <select name="select">
     <cfoutput query="Query">
       <option>#field#</option>
     </cfoutput>
    </select>
     </td>
  </tr>
</table>

You should have to save this one as radio.cfm referring the file specified in the code document.location...OK.

If you have any question regarding this one. Response immediately.

GOODLUCK!
0
 
LVL 11

Expert Comment

by:hart
ID: 8244385
entrance2002 has a similar solution, the only difference is that he isn't submitting and is sending it through a querystring.

The query string can be tampered by the end user so he could change query1 to query2 in the url even if he had selected the 1st one.

i hope enterance2002 agrees with me

Regards
Hart
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 1

Expert Comment

by:Ken-doh
ID: 8244708
try cf2selectsrelated

you can modify it to work for this i recon :)
0
 
LVL 10

Expert Comment

by:substand
ID: 8258173
try this:

<cfquery name="query1" datasource="datasource">
     select the items for query 1
</cfquery>
<cfquery name="query2" datasource="datasource">
     select the items for query 2
</cfquery>
<cfloop query="query1">
     set the column result rows to be a list like:
     "row1","row2","row3"
     
     call the list variable QUERY1 (or whatever you want, but i'm using QUERY1 below)
</cfloop>
<cfloop query="query2">
     set the column result rows to be a list like:
     "row1","row2","row3"
     
     call the list variable QUERY2
</cfloop>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<script>
function changeDropDown()
{
var myEle;
var index;
var i;
if (document.form.RADIONAME.value==VALUE1) index=1;
else if (document.form.RADIONAME.value==VALUE2) index=2;
//add more if you want

q1 = new Array(#QUERY1#);
q2 = new Array(#QUERY2#);

for (i = document.form.DROPDOWNTOCHANGE.options.length; i >= 0; i--)
          document.form.DROPDOWNTOCHANGE.options[i] = null;
         
if (index == 1)
     for (i = 0; i<q1.length; i++){
           myEle = document.createElement("option");
           myEle.value = q1[i] ;
           myEle.text = q1[i] ;
            document.form.DROPDOWNTOCHANGE.add(myEle);}
else if (index == 2)
     for (i = q2.length-1; i >= 0; i--){
           myEle = document.createElement("option");
           myEle.value = q2[i] ;
           myEle.text = q2[i] ;
            document.form.DROPDOWNTOCHANGE.add(myEle);}
//add more if you need
//of course if you need different values and text, then just create them how i did above
}

</script>

     <title>Untitled</title>
</head>

<body>

<form .... >
<input type="radio" value="VALUE1" onchange="changeDropDown();">
<input type="radio" value="VALUE2" onchange="changeDropDown();">


</form>


</body>
</html>
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 10941016
No comment has been added lately, so it's time to clean up this question.
I will leave the following recommendation in the Cleanup topic area:

Split hart & entrance2002

Please leave any comments here within the next four days.

mrichmon
EE Cleanup Volunteer
0

Featured Post

U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

Question has a verified solution.

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

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…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
In this video, Percona Solution Engineer Rick Golba discuss how (and why) you implement high availability in a database environment. To discuss how Percona Consulting can help with your design and architecture needs for your database and infrastr…
Suggested Courses

777 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