Javascript - radio button enable/disable elements not right
Question
So i'm trying to make enable/disabled elements based on the checked radio button in the edit form.
When I try to run the code and test the form, it looks kinda funny. I don't know how to explain it in words but this is the gif that would show the problem. It didn't enabled and disabled the elements correctly. Looks kinda funny.
I also wanted the elements to stay enabled and disabled the elements based on the checked radio button when it retrieve the values from the database but it didn't work either
This is my code
<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 toggleAlert2() {
toggleDisabled(document.getElementById("division"));
document.getElementById("extText").disabled = false;
}
function toggleDisabled(el) {
try {
el.disabled = el.disabled ? false : true;
}
catch(E){
}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
toggleDisabled(el.childNodes[x]);
}
}
}
function toggleAlert() {
document.getElementById("extText").disabled = true;
}
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
ID: 50<br>
<input type="hidden" name="id" value="50" />
<label for = "client1">
<input type="radio" name="client_type" id = "client1" value="Division" checked onclick="toggleAlert()"/> Division
</label>
                                     
<label for ="client2">
<input type="radio" name="client_type" id = "client2" value="External" onclick="toggleAlert2()"/> External
</label>
 
<input type="text" id="extText" name="client_details2" value="rrrrrr"/>
<br><br>
<div id="division">
Division:
<select name="client_details">
<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" name="client_details1" value="rrrrrr" />
<br>
</div>
<br>
<input type="submit" name="submit" value="Submit"/>
</form>
</body>
What are the alternatives to fix my code? Thanks!
2 answers
solution1
1 ACCPTED 2017-03-23 05:21:48
Try rewrite it without recursion, try-catch and setting disabled for specific div classes using querySelector(). https://jsfiddle.net/Lsre6mfL/
You can also fold
var divis_el = document.getElementById("division");
for (var i = 0; i < divis_el.children.length; i++) {
divis_el.children[i].disabled = true;
}
In function.
solution2
0 2017-03-23 06:04:28
Wow, look how simple it is.
function toggleAlert2() { document.getElementById("extText").disabled = false; document.getElementById("client_details").disabled = true; document.getElementById("client_details1").disabled = true; } function toggleAlert() { document.getElementById("extText").disabled = true; document.getElementById("client_details").disabled = false; document.getElementById("client_details1").disabled = false; }
<form method="post" action="" enctype="multipart/form-data"> ID: 50<br> <input type="hidden" name="id" value="50" /> <label for = "client1"> <input type="radio" name="client_type" id = "client1" value="Division" checked onchange="toggleAlert()"/> Division </label>                                       <label for ="client2"> <input type="radio" name="client_type" id = "client2" value="External" onchange="toggleAlert2()"/> External </label>   <input type="text" id="extText" name="client_details2" value="rrrrrr"/> <br><br> <div id="division"> Division: <select id="client_details" name="client_details"> <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 id="client_details1" type="text" name="client_details1" value="rrrrrr" /> <br> </div> <br> <input type="submit" name="submit" value="Submit"/> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.