I am stuck up with this on my php page. I cant disable another dropdown on selection of some other dropdown. My HTML code:
<div class="form-group" >
<label for="status" class="col-sm-3 control- label">Dropdown1</label>
<div class="col-sm-6">
<select name="status" id="status" onchange="DisableMenu()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="form-group" >
<label for="status" class="col-sm-3 control-label">Dropdown2</label>
<div class="col-sm-6">
<select name="progress" id="progress" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
The js Disable Menu is:
<script type="text/javascript">
function DisableMenu()
{
if(document.getElementById("status").value=="1" || document.getElementById("status").value == "2")
{
document.getElementById("progress").disabled = "true";
}
else
{
document.getElementById("progress").disabled = "false";
}
}
</script>
I tried a lot of ways . I think it is about the JS. But it seems like the "onchange" doesn't redirect properly. It doesn't even get into the function DisableMenu(). I also tried changing the .disable = "true" to "disabled" and still it doesn't work. I also tried .style.display = "block" and "none". I cant figure out whats really wrong.Please help me out here.
change this
document.getElementById("progress").disabled = "false";
to
document.getElementById("progress").disabled = false;
function DisableMenu(){
if(document.getElementById("status").value=="1" || document.getElementById("status").value == "2"){
document.getElementById("progress").disabled = true;
} else {
document.getElementById("progress").disabled = false;
}
}
<div class="form-group" >
<label for="status" class="col-sm-3 control- label">Dropdown1</label>
<div class="col-sm-6">
<select name="status" id="status" onchange="DisableMenu()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="form-group" >
<label for="status" class="col-sm-3 control-label">Dropdown2</label>
<div class="col-sm-6">
<select name="progress" id="progress" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>