Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 460
  • Last Modified:

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
0
danimal_c
Asked:
danimal_c
2 Solutions
 
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
 
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
[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

 
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now