homepage Welcome to WebmasterWorld Guest from 54.145.183.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
how to disable form elements based on another element
deejay

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4362205 posted 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 "&nbsp; <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 "&nbsp; <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?

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved