Populate a Dropdown list dynamically based on a radio group selection

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
danimal_cAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hartCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Renante EnteraSenior PHP DeveloperCommented:
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
hartCommented:
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 expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Ken-dohCommented:
try cf2selectsrelated

you can modify it to work for this i recon :)
0
substandCommented:
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
mrichmonCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.