Disabling Form Elements with Javascript
Here’s something I’m a proud of, I had to figure out a way to disable form elements which were children of a table row class, or rather all table row classes not currently selected from the dropdown menu:
<select name="cat" id="cat" onChange="showHide(this.value);">
<option value="res" >Resumes</option> <option value="ggg" >Gigs</option> <option value="eee" >Events</option>
</select>
<table> <tr id="res" style="display: none;"> […]
Here’s something I’m a proud of, I had to figure out a way to disable form elements which were children of a table row class, or rather all table row classes not currently selected from the dropdown menu:
<select name="cat" id="cat" onChange="showHide(this.value);">
<option value="res" >Resumes</option> <option value="ggg" >Gigs</option> <option value="eee" >Events</option>
</select>
<table> <tr id="res" style="display: none;"> <td><img src="/images/spacer.gif" width="10" height="1" border="0"></td>
<td>Resumes Options:</td> <td>None Available</td> </tr>
<tr id="ggg" style="display: none;">
<td><img src="/images/spacer.gif" width="10" height="1" border="0"></td> <td>Gigs Options:</td>
<td>None Available</td> </tr> <tr id="eee" style="display: none;"> <td><img src="/images/spacer.gif" width="10" height="1" border="0"></td>
<td>Events Options:</td> <td>None Available</td> </tr></table>
Consider the following javascript for looping through the form elements:
//usage: onSubmit=”findOptions(this.cat.value)”
function findOptions(selectedId){ //populate array with possible options from “cat” var selectObj = document.getElementById(”cat”); var options = new Array(selectObj.length);
for (var i = 0; i < selectObj.length; i++) { options[i] = selectObj[i].value; }
//check unselected options and get their nodes for (var i = 0; i < options.length; i++) { if (options[i] != selectedId) { var disableId = options[i]; //alert(disableId); getFormNodes(disableId); } }}
function getFormNodes(disableId){ //get the form nodes from the id to disable //alert(disableId); var obj = document.getElementById(disableId); var inputTags = obj.getElementsByTagName(”input”); var selectTags = obj.getElementsByTagName(”select”);
disableFormNodes(inputTags); disableFormNodes(selectTags);}
function disableFormNodes(formTags){ //disable each form node for (var i = 0; i < formTags.length; i++) { var myNode = formTags[i]; myNode.disabled = true; }}



















