I have a DropDownList that asks the user if he want to join the club:
Do you want to join the club
Yes
No
Under this list there is another list that is set to disabled as a default. This list has the departments of the club. This list will not be enabled until the user chooses Yes.
I built the following code but the problem that I couldn't solve is let's assume the user chooses Yes then he changes his decision so he will choose No again. In this case the list of the departments still enabled. I want it to be disabled when he chooses No again.
<html>
<head>
<script type="text/javascript">
function disable()
{
document.getElementById("mySelect1").disabled=true;
}
function enable()
{
document.getElementById("mySelect1").disabled=false;
}
</script>
</head>
<body>
<form>
<select id="mySelect" onChange="enable();">
<option onSelect="disable();">No</option>
<option onSelect="enable();">Yes</option>
</select>
<select id="mySelect1" disabled="disabled" >
<option>Dep1</option>
<option>Dep2</option>
<option>Dep3</option>
<option>Dep4</option>
</select>
</form>
</body>
</html>
I thought that onSelect="disable();" would solve the problem but it still doesn't work.
Thanks
I'd do it like this jsFiddle example.
JavaScript:
function check(elem) {
document.getElementById('mySelect1').disabled = !elem.selectedIndex;
}
HTML:
<form>
<select id="mySelect" onChange="check(this);">
<option>No</option>
<option>Yes</option>
</select>
<select id="mySelect1" disabled="disabled" >
<option>Dep1</option>
<option>Dep2</option>
<option>Dep3</option>
<option>Dep4</option>
</select>
</form>
I bet the onchange is getting fired after the onselect, essentially re-enabling the select.
I'd recommend you implement only the onchange, inspect which option has been selected, and enable or disabled based on that.
To get the value of the selected option use:
document.getElementById("mySelect").options[document.getElementById("mySelect").selectedIndex].value
Which will yield .. nothing since you haven't specified a value for each option .. :(
<select id="mySelect" onChange="enable();">
<option onSelect="disable();" value="no">No</option>
<option onSelect="enable();" value="yes">Yes</option>
</select>
Now it will yield "yes" or "no"
To make a robust form, have it load in a useful state and use script to enhance its behaviour. In the following, the select has been replaced by radio buttons (makes life much easier for the user).
The "yes" option is checked by default and the select is enabled. If the user checks either radio button, the select is enabled or disabled accordingly.
<form onclick="this.mySelect1.disabled = this.becomeMember[1].checked;" ... >
<input type="radio" name="becomeMember" checked>Yes<br>
<input type="radio" name="becomeMember">No<br>
<select id="mySelect1">
<option>Dep1
<option>Dep2
<option>Dep3
<option>Dep4
</select>
...
</form>
Simply & Easy :
JavaScript code :
function JoinedOrNot(){
var cat = document.getElementById("mySelect");
if(cat.value == "yes"){
document.getElementById("mySelect1").disabled = false;
}else{
document.getElementById("mySelect1").disabled = true;
}
}
just add in this line [onChange="JoinedOrNot()"] : <select id="mySelect" onchange="JoinedOrNot()">
it's work fine ;)
hmm. why don't you use onClick()
<select id="mySelect" onChange="enable();">
<option onClick="disable();">No</option>
<option onClick="enable();">Yes</option>
</select>
