MechaMetalHead MechaMetalHead -4 years ago 91
HTML Question

Javascript - enable/disable elements and text box based on drop down not working

This code demo here is taken from this question. But I wanted to make the text box enable when the value "Others" is chosen from the drop down.

This is the code that I edited from the jsfiddle.

<html>
<head>
<title> Submit a Contract </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function toggleExternal() {
document.getElementById("extText").disabled = false;

var divis_el = document.getElementById("division");
for (var i = 0; i < divis_el.children.length; i++) {
divis_el.children[i].disabled = true;
}
}
function toggleDivision() {
document.getElementById("extText").disabled = true;z
var divis_el = document.getElementById("division");
for (var i = 0; i < divis_el.children.length; i++) {
divis_el.children[i].disabled = false;
}
}

function enableTextbox() {
var val = document.getElementById("mySelect").selectedIndex;
if (val == 0 || val == 1 ||val == 2 ||val == 3 ||val == 4 ||) { document.getElementById("otherTxt").disabled = true}
if (val == 5) { document.getElementById("otherTxt").disabled = true; }
}
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
ID:<br>
<input type="hidden" name="id" value="50" />

<label for = "client1">
<input type="radio" name="client_type" id = "client1" value="Division" checked onclick="toggleDivision()"/> Division
</label>
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<label for ="client2">
<input type="radio" name="client_type" id = "client2" value="External" onclick="toggleExternal()"/> External
</label>
&nbsp
<input disabled type="text" id="extText" name="client_details2" value=""/>
<br><br>

<div id="division">
Division:
<select id="mySelect" name="client_details" onchange="enableTextbox()">
<option value="Choose">Choose Division...</option>
<option value="Distribution">Distribution</option>
<option value="Transmission">Transmission</option>
<option value="Generation">Generation</option>
<option value="Procument">Procument</option>
<option value="Other">Others</option>
</select>
<br><br>
Others:<input type="text" id="otherTxt" name="client_details1" value="" disabled/>
<br>
</div>
<br>
<input type="submit" name="submit" value="Submit"/>
</form>
</body>


I added the function enableTextBox and then the disabled/enabled elements suddenly didn't work. Why is that?

Answer Source

You make 1 mistake in this line. after val == 4 you putted "or" sign "||" which is not allow in JS.

your second mistake is "otherTxt" field already disabled and you trying to disable it. so change the value "disable = false"

if (val == 0 || val == 1 ||val == 2 ||val == 3 ||val == 4) 
{
   document.getElementById("otherTxt").disabled = false
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download