Chovy's Blog

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;
  }
}