Show/Hide Elements in a table

Here's a pretty basic form with a few radio buttons which either display or hide elements based on what's selected in the radio buttons. I named this to make it a bit easier to explain...

If I select Option 1: It gives me a second set of radio buttons to choose from... Option 1a and Option 1b...
   - If I select Option 1a it shows me a row with a text field
   - If I selected Option 1b it shows me a different text field... so far so good...

If I select Option 2: It shows me a text field... all is well..

If I select Option 1, then select Option 1a, but change my mind and want Option 2 instead, Option 1a's selected row doesn't hide, it still shows, so how can I again hide Option 1a's row or Option 1b's row depending on what's selected?

And how can I disable a field such that only the field/s shown are passed when submitting the form?

here is the form I'm messing with...
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

<script type="text/javascript">
<!--
function showPart2(fObj,obj){
    gRef = fObj.name+"disp";
    if (window[gRef]) {
      window[gRef].style.display = "none";
    }
    displayed = document.getElementById(obj);
    if(displayed){
      displayed.style.display = "inline";
      window[gRef] = displayed;
    }
}
// -->
</script>

<table width="589" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="97">Select Option</td>
    <td width="231">
        Option 1 <input type="radio" name="SetOne" value="Yes" onclick="showPart2(this,'setA');">
      Option 2 <input type="radio" name="SetOne" value="No" onclick="showPart2(this,'setB');"></td>
    <td width="253">
      <span id="setA" style="display: none;">
        Option 1a <input type="radio" name="SetTwo" value="Yes" onclick="showPart2(this,'SubSetA');">
      Option 1b <input type="radio" name="SetTwo" value="No" onclick="showPart2(this,'SubSetB');">
      </span>
      </td>
  </tr>
  <tr id="setB" style="display: none;">
    <td>&nbsp;</td>
    <td>Option 2 Selected</td>
    <td><input type="text" name="textfield"></td>
  </tr>
  <tr id="SubSetA" style="display: none;">
    <td>&nbsp;</td>
    <td>Option 1a Selected</td>
    <td><input type="text" name="textfield2"></td>
  </tr>
  <tr id="SubSetB" style="display: none;">
    <td>&nbsp;</td>
    <td>Option 1b Selected</td>
    <td><input type="text" name="textfield3"></td>
  </tr>
</table>
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

just cut n paste ;o)

~trail
LVL 20
trailblazzyr55Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dorwardCommented:
<tr> elements do not, by default, display inline - in CSS 2 browsers (Mozilla, Firefox, Opera, Safari, Konqueror, etc, etc) they display: table-row, and in Internet Explorer they display: block.

The best aproach to this is probably to leave them all visible by default, then onload loop through them and set them to foo.style.display to "none". When you want to make one visible set foo.style.display to "" (thus reverting to the default and being safe in both Internet Explorer and CSS 2 browsers)
AnarchonCommented:
Or "display" 'em way offscreen...leave no trace.

Hide 'em with...
   document.getElementById(id).style.position="absolute";
   document.getElementById(id).style.left = -500;

Show 'em with...
   document.getElementById(id).style.position="relative";
   document.getElementById(id).style.left = "";

Start 'em off in whichever state suits.
str_kaniCommented:
I think you have some problem in your browser, i see everything right in my machine!

>>>> And how can I disable a field such that only the field/s shown are passed when submitting the form?
You can not do that, it will submit all the control values in side the form,
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

trailblazzyr55Author Commented:
the way I was going about this was wrong, I've corrected my own mistake in the way I was writing the code and have found a better way of going about this, I'm going to have this question deleted. Thanks for the input experts =)

regards,
~trail
dorwardCommented:
Objection: The question was answered, even if the asker later decided he didn't care about the answer.
trailblazzyr55Author Commented:
my solution to the question originally asked was using sessions through a step process and guiding the user through a process which was defined as they selected options. This actually proved to be better as a solution and nowhere on this particular post was that option recommended.

Below I have addressed each post:

Dorward:
=-=-=-=-=-=-=-=-
1) <tr> elements do not, by default, display inline - in CSS 2 browsers (Mozilla, Firefox, Opera, Safari, Konqueror, etc, etc) they display: table-row, and in Internet Explorer they display: block.

2) The best aproach to this is probably to leave them all visible by default, then onload loop through them and set them to foo.style.display to "none". When you want to make one visible set foo.style.display to "" (thus reverting to the default and being safe in both Internet Explorer and CSS 2 browsers)

------ reply---------

1) yes you are right, I made the change... no help
2) I'm not sure how to loop through the options onload to set the display to "none", if you could show me an example that worked, then doing what you're explaining and doing what I originally asked,  I will award you the points.
=-=-=-=-=-=-=-=-

Anarchon
=-=-=-=-=-=-=-=-
Or "display" 'em way offscreen...leave no trace.

Hide 'em with...
   document.getElementById(id).style.position="absolute";
   document.getElementById(id).style.left = -500;

Show 'em with...
   document.getElementById(id).style.position="relative";
   document.getElementById(id).style.left = "";

Start 'em off in whichever state suits.

----Reply------

1) displaying them offscreen sounded good, but didn't work like I was hoping. I tried your example to the best I know how to code it in javascript to no avail. If you're willing post a working example using the code above I'm still open to award the points for the original question.
=-=-=-=-=-=-=-=-

str_kani
=-=-=-=-=-=-=-=-
1) I think you have some problem in your browser, i see everything right in my machine!

2) >>>> And how can I disable a field such that only the field/s shown are passed when submitting the form?
You can not do that, it will submit all the control values in side the form,

---Reply----

1) I have tried this in IE, NS, and FireFox ... all act the same =) they work, it's just that the second option does not hide when the first option is selected. that was my original problem.

2) Seems funny... I had hardcoded "disabled" in a text box, posted and showed no defined value for that form on the action page. It did not pass. Maybe something I did wrong, but to me it didn't seem to pass... even when I hard coded a value in it.
=-=-=-=-=-=-=-=-

I asked for this question to be closed because I saw no solution to the original question that worked for me and found a better work around. I will still award points for a solution because I'm still interested in how this could be done, but like I said examples would surely help because I'm still learning how to use javascript =^) I have not lost interest in the solution to this question, but found limited replies and a work around.

>>>>Objection: The question was answered, even if the asker later decided he didn't care about the answer.

Dorward: thanks for your interest in providing a solution, could you show me how you would implement your method in the code I posted? I would be more than happy to know how to use your method ;o)

regards,
~trail

dorwardCommented:
(this is quickly hacked together, so I didn't bother using your radio buttons - it should serve as a proof of concept though - let me know if you need more.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
   <title>Show/Hide Table Rows</title>

<script type="text/javascript">

function hideAll() {
  var table = document.getElementById('myTableWithHiddenRows');
  var rows = table.getElementsByTagName('tr');
  for (i=0; i<rows.length; i++) {
    if (rows[i].className == "toggled") {
      rows[i].style.display = 'none';
    }
  }
}

window.onload = hideAll;

function showOne(which) {
  document.getElementById(which).style.display = '';
}

function hideAllButOne(which) {
  hideAll();
  showOne(which);
}

</script>
   <h1>Show/Hide Table Rows</h1>

<input type="button" onclick="hideAllButOne(this.value)"
       value="setB">
<input type="button" onclick="hideAllButOne(this.value)"
       value="SubSetB">
<input type="button" onclick="hideAllButOne(this.value)"
       value="SubSetA">


   <table id="myTableWithHiddenRows">

   <tr><th>Heading</th><th>Heading</th><th>Heading</th></tr>
   <tr><td>Row</td><td>Always</td><td>visible</td></tr>
 <tr id="setB" class="toggled">
    <td>&nbsp;</td>
    <td>Option 2 Selected</td>

    <td><input type="text" name="textfield"></td>
  </tr>
  <tr id="SubSetA" class="toggled">
    <td>&nbsp;</td>
    <td>Option 1a Selected</td>
    <td><input type="text" name="textfield2"></td>
  </tr>
  <tr id="SubSetB" class="toggled">

    <td>&nbsp;</td>
    <td>Option 1b Selected</td>
    <td><input type="text" name="textfield3"></td>
  </tr>
</table>

CetusMODCommented:
PAQ'd, 500 points refunded.
CetusMOD
Community Support Moderator

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dorwardCommented:
Why was this PAQ'd?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.