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

This entry was posted on Thursday, May 5th, 2005 at 6:07 am and is filed under Personal. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.