Click to See Complete Forum and Search --> : radio button value


zama
07-18-2003, 02:06 PM
I have created 3 listboxes that are dependant on the selection of a radio button.


*******************
<cfquery name="Bird" datasource="Invasive">
select Name, ID, Type
from lu_Species
where Type='Bird'
order by name

</cfquery>
<cfquery name="Herptile" datasource="Invasive">
select Name, ID, Type
from lu_Species
where Type='Herptile'
order by name
</cfquery>

<cfquery name="Mammal" datasource="Invasive">
select Name, ID, Type
from lu_Species
where Type='Mammal'
order by name
</cfquery>


<script>

var HerptileList= Array <CFOUTPUT>(#quotedValueList(Herptile.Name)#);
var BirdList= Array(#quotedValueList(Bird.Name)#);
var MammalList= Array (#quotedValueList(Mammal.Name)#);
</CFOUTPUT>


function changeSelect(theValue) {

if(theValue=="Herptile") {
var myArray=HerptileList;
}

if (theValue=="Bird"){
var myArray=BirdList;
}

if (theValue=="Mammal"){
var myArray=MammalList;
}




document.getElementById("theListBox").options.length=0;

for(i=0;i<myArray.length;i++) {
var text=myArray;
var val=myArray;
document.getElementById("theListBox").options[document.getElementById("theListBox").options.length]= new Option(text, val, false, false);
}

}
</script>




<tr>

<td class="top2"><b><font color="red"><select name="theListBox" id="theListBox" style="width:150px"><option>Select Animal Type</select>


<input type="radio" value="Herptile" onclick="changeSelect(this.value)" name="Species_ID">Herptile

<input type="radio" value="Bird" onclick="changeSelect(this.value)" name="Species_ID">Bird

<input type="radio" value="Mammal" onclick="changeSelect(this.value)" name="Species_ID">Mammal
</tr>

*********
The above code works in just fine regards to when a radio button is selected, the contents on the list box change - but I need help with the 'value' of the radio button after a user has selected it, because this is what will be eventually inserted into my database. For example, I want ''American Bullfrog' to be entered instead of 'Herptile'.


At the moment the following code will insert the general animal types (ie: Herptile, Mammal, Bird):


<input type="radio" value="Herptile" onclick="changeSelect(this.value)" name="Species_ID">Herptile

<input type="radio" value="Bird" onclick="changeSelect(this.value)" name="Species_ID">Bird

<input type="radio" value="Mammal" onclick="changeSelect(this.value)" name="Species_ID">Mammal


I however want to insert the specific animal types (ie: values from var HerptileList= Array ('American Bullfrog','Other')


What do I need to change?

Thanks for you help with this

AdamBrill
07-18-2003, 11:06 PM
Can you post the entire source for you page? Or maybe just zip up the page and attach it? It is easier to fix it if we have the whole page. ;)

zama
07-21-2003, 11:23 AM
Here is what the source code looks like for the entire page:



<html>
<head>
<title>Animal Treatment Data Entry Form</title>
</head>






<script>

var HerptileList= Array ('American Bullfrog','Other');
var BirdList= Array('European Starling','Other');
var MammalList= Array ('Other');



function changeSelect(theValue) {

if(theValue=="Herptile") {
var myArray=HerptileList;
}

if (theValue=="Bird"){
var myArray=BirdList;
}

if (theValue=="Mammal"){
var myArray=MammalList;
}




document.getElementById("theListBox").options.length=0;

for(i=0;i<myArray.length;i++) {
var text=myArray[i];
var val=myArray[i];
document.getElementById("theListBox").options[document.getElementById("theListBox").options.length]= new Option(text, val, false, false);
}

}
</script>






<body bgcolor="white">

<div align="center">
<TABLE border="4" bordercolor="8b008b" bgcolor="lightsteelblue" cellspacing="3" cellpadding="6" width="100">
<tr>
<td align="middle" bgcolor="808000" colspan="20"><FONT face="Verdana" color="white"><STRONG>INVASIVE ANIMAL TREATMENT MAPPING DATA ENTRY FORM </STRONG></FONT> </td>
</tr>
<form Action="AnimalTreatEnter2.cfm" Method="post">

<tr>
<td class="top2">
<div align="left">
<table border="0" cellpadding="2" cellspacing="5" width="100%">

<tr>
<td class="top2" rowspan="2"><img border="2" src="images/frog.jpeg" width="100"></td>
<td class="top2" align="left"><b>Unique Site Id:
<Font color="purple">test</font></b></td>
</tr>
<tr>
<td class="top2" width="100%" align="left"><b>Descriptive Location:
<Font color="purple">test</b></font></td>
</tr>

<tr>
<td class="top4" colspan="2">
<Font color="red"><b>*** Mandatory fields are indicated in red ***</b></font>
</td>
</tr>
</table>
</div>
</td>
</tr>
<input type="hidden" name="Site_id" value="test">
<input type="hidden" name="DTE_ENTERED" value="{ts '2003-07-21 09:24:04'}">
<Input Type="Hidden" Name="pt_lat" value="51.389840920386">
<Input Type="Hidden" Name="pt_lon" value="-126.348868808318">
<input type="hidden" name="Point_ID" value="880">



<tr>
<td class="top2">
<div align="left">
<table border="0" cellpadding="2" cellspacing="3" width="100%" height="215">
<tr>
<tr>

<td class="top2"><b><select name="theListBox" id="theListBox" style="color: red" style="FONT-SIZE: xx-small" style="width:150px"><option>Select Animal Type</select>


<input type="radio" value="Herptile" onclick="changeSelect(this.value)" name="Species_ID">Herptile<br>
<input type="radio" value="Bird" onclick="changeSelect(this.value)" name="Species_ID">Bird<br>
<input type="radio" value="Mammal" onclick="changeSelect(this.value)" name="Species_ID">Mammal
</tr>

<tr>
<td class="top2" colspan="3"><b><font color="red">Who treated this species?</font></b>
<b> <select name="ObsGroup" size="1" style="FONT-SIZE: xx-small">
<option value="1">N/A</option><option value="2">LEPS Mappers</option><option value="3">LEPS Samplers</option><option value="4">Stream Mappers</option><option value="5">LEPS mappers or LEPS samplers</option>
</select></b></td>

</td>
</tr>

<td class="top2" height="16"><b><font color="red">Date of Treatment: (dd/mm/yyyy)</font<br><br><INPUT NAME="DTE_OBSERVED" size="15" style="FONT-SIZE: xx-small"></b></td>

</tr>
<tr>
<td class="top2" height="16"><b>How many were treated?&nbsp;&nbsp;&nbsp;&nbsp;<INPUT NAME="Number_Treated" size="15" style="FONT-SIZE: xx-small"></b></td>
</tr>

<tr>
<td class="top2" colspan="3"><b>Method of treatment used:</b>
<b> <select name="method" size="1" style="FONT-SIZE: xx-small">
<option value="0" selected>Select one</option>
<option value="1">Control</option>
<option value="2">Removal</option>
</select></b></td>

</td>
</tr>
<tr>
<td class="top2" colspan="3"><b>Type of treatment used:</b>
<b>&nbsp;&nbsp;&nbsp;&nbsp; <select name="Treatment_Type" size="1" style="FONT-SIZE: xx-small">
<option value="0" selected>Select one</option>
<option value="1">Trapped</option>
<option value="2">Shot</option>
<option value="3">Egg Removal/Culling</option>
<option value="4">Sterilization</option>
<option value="5">Other</option>
</select></b></td>

</td>
</tr>


<tr>
<td class="top2" height="16"><b>How much time was taken to treat species?</b>&nbsp;&nbsp;<td><INPUT NAME="time_to_treat" size="10" style="FONT-SIZE: xx-small"></b></td>
</tr>

<tr>
<td class="top2" height="16"><b>What was the method of disposing the species?</b>&nbsp;&nbsp;
<select name="Waste_Treatment" size="1" style="FONT-SIZE: xx-small">
<option value="0" selected>Select one</option>
<option value="1">Buried</option>
<option value="2">Landfilled</option>
<option value="3">Other</option>

</select></b></td>
</tr>
<tr>
<td class="top2" colspan="3"><b>Outcome of Treatment:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b> <select name="Treatment_Outcome" size="1" style="FONT-SIZE: xx-small">
<option value="4" >Select One</option>
<option value="1">Unsuccessful</option>
<option value="2">Successful</option>
<option value="3">Undetermined</option>
</select></b></td>

</td>
</tr>
<tr>
<td class="top2" height="16"><b>Additional comments:</b>&nbsp;&nbsp;<td><INPUT NAME="comments" size="100" style="FONT-SIZE: xx-small"></b></td>
</tr>


<tr>


</table>


<TR>
<td><div align="center">
<input type="Submit" Value="Submit" style="FONT-SIZE: xx-small"></td></tr>
</FORM>
</TABLE> </TABLE></DIV></BODY></HTML>