| how to disable form elements based on another element
|
deejay
msg:4362207 | 2:05 am on Sep 14, 2011 (gmt 0) |
I have a large form, in one section of which I want users to select one or several options from only one of three option lists.
To make this clear to the user, when they click into an option list, I really want the other two option lists to disable - alternatively, and this is where I'm at now, they could select which option list they intend to use from a set of radio buttons, at which point two of the three option lists would be disabled (or, even better, all three option lists would start out disabled, and the one they want would enable when selected from the radio list).
I know very little about javascript - can you help me out please?
echo "<form action=\"versus.php\" name=aform target=\"_blank\" method=\"POST\">";
//...bunch of other form elements
//the radio buttons to select which option list to use:
echo "<INPUT TYPE=RADIO class=radio NAME=varselect VALUE=crop checked>Crop/s <br> <INPUT TYPE=RADIO class=radio NAME=varselect VALUE=type> Type/s<br> <INPUT TYPE=RADIO class=radio NAME=varselect VALUE=variety>Variety/s<p>";
//javascript i found that i'm trying to get working
?>
<script>
function checkifempty(){
if (document.aform.varselect.value=='')
document.aform.crop.disabled=true
document.aform.vartype.disabled=true
document.aform.variety.disabled=true
elseif(document.aform.varselect.value=='crop')
document.aform.crop.disabled=false
document.aform.vartype.disabled=true
document.aform.variety.disabled=true
elseif(document.aform.varselect.value=='type')
document.aform.crop.disabled=true
document.aform.vartype.disabled=false
document.aform.variety.disabled=true
else
document.aform.crop.disabled=true
document.aform.vartype.disabled=true
document.aform.variety.disabled=false
}
if (document.all || document.getElementById)
setInterval("checkifempty()",100)
</script>
<?
echo "Select Crop<p>";
//select query for crop here, etc
echo "<select name='crop[]' multiple='multiple' size=12 class=versus>";
while ($row = mysql_fetch_array($varresult)) {
echo "<option VALUE=\"".$row['id']."\">";
echo $row['crop']." (".$row['ccompcrop'].")</option>";
}
echo "</select>";
echo " <p>OR Select Type<p>";
//select query for type here, etc
$counter=1;
$cname='';
echo "<select name='vartype[]' multiple='multiple' size=12>";
while ($row = mysql_fetch_array($varresult)) {
if($cname==$row['crop']){
}
ELSE
{
if(!$counter==1){
echo "</optgroup>";
}
echo "<optgroup label=".$row['crop']."></b><br>";
}
echo "<option VALUE=\"".$row['id']."\">";
echo $row['id']." (".$row['ccompvariety'].")</option>";
$counter++; //increment "$counter"
$cname=$row['crop'];
}
echo "</optgroup></select>";
echo " <p>OR Select Variety/ies<p>";
//select query for variety here, etc
$counter=1;
$cname='';
echo "<select name='variety[]' multiple='multiple' size=12>";
while ($row = mysql_fetch_array($varresult)) {
if($cname==$row['crop']){
}
ELSE
{
if(!$counter==1){
echo "</optgroup>";
}
echo "<optgroup label=".$row['crop']."></b><br>";
}
echo "<option VALUE=\"".$row['varietyid']."\">";
echo $row['variety']." (".$row['cvariety'].")</option>";
$counter++; //increment "$counter"
$cname=$row['crop'];
}
echo "</optgroup></select>";
I'm sure I'm probably referring to the form elements incorrectly in the Javascript? lil help please?
|
|
