Display other form elements based on radio selection

Question

Hello,

I'm trying to display a specific block of html with some form elements based on whatever is selected in a radio button.

Below is the framework of what I have, I didn't include any of the JQUERY that I tried because I couldn't get anything to work. Any chance someone could help me fill in the blanks?

TIA!

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script src="/js/jquery.chainedSelects.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
    showValBox = function(data) {

    }; 
});
</script>


<form action="" method="post" id="SomeForm" />
<table>
    <tr>
     <td class="td-ctr">Size</td>
     <td class="td-ct"><input type="radio" name="Radio" value="Value1" onChange="showValBox(this.value)" /> Value <input type="radio" name="Radio" value="Value2" onChange="showValBox(this.value)" /> Value</td>
    </tr>
    <div id="Value1" style="display:none">
    <tr>
     <td class="td-ctr">Only if Value 1</td>
     <td class="td-ct"><input type="text" name="SomeName" value="" /></td>
    </tr>
    </div>   
    <div id="Value2" style="display:none">
    <tr>
     <td colspan="2" class="td-ct">Online if Value 2</td>
    </tr>
    <tr>
     <td class="td-ctr">SomeName1</td>
     <td class="td-ct"><input type="text" name="SomeName1" value="" /></td>
    </tr> 
    <tr>
     <td class="td-ctr">SomeName2</td>
     <td class="td-ct"><input type="text" name="SomeName2" value="" /></td>
    </tr>
    <tr>
     <td class="td-ctr">SomeName3</td>
     <td class="td-ct"><input type="text" name="SomeName3" value="" /></td>
    </tr>
    <tr>
     <td class="td-ctr">SomeName4/td>
     <td class="td-ct"><input type="text" name="SomeName4" value="" /></td>
    </tr>
    <tr>
     <td class="td-ctr">SomeName5</td>
     <td class="td-ct"><input type="text" name="SomeName5" value="" /></td>
    </tr>
    <tr>
     <td class="td-ctr">SomeName6</td>
     <td class="td-ct"><input type="text" name="SomeName6" value="" /></td>
    </tr>
    <tr>
     <td class="td-ctr">SomeName7</td>
     <td class="td-ct"><input type="text" name="SomeName7" value="" /></td>
    </tr>                    
    </div>
</table>
</form>

Answer 1

First and foremost, you cannot semantically have DIV's between your table rows. They must be contained within your TD elements. I would suggest you apply your ID tag to the TR element which will hide the entire row. Second, I would suggest all of your TR's share a class to easily hide elements when the radio changes.

1. hidden rows share the class hiddenContainers

CODE

$(ready(function() {
    $("input[name='Radio']").click(function() {
        var val = $(this).val();
        $('.hiddenContainers').hide();
        $('#'+val).show();
    });
});

Answer 2

Your HTML isn't valid because the DIV elements need to be inside a column if you include them in a table. What you really want to do is give your rows different classes depending on which set they belong to and then show/hide based on the class. You might consider using a "hidden" class to control the "display: none;" style, then simply add/remove this class.

I would probably run it on click and use jQuery:

$('[name=Radio]').click( function() {
   var klass = '.' + $(this).val();
   $('.class1,.class2').addClass('hidden');
   $(klass).removeClass('hidden');
});

<form action="" method="post" id="SomeForm" />
<table>
    <tr>
        <td class="td-ctr">Size</td>
        <td class="td-ct">
            <input type="radio" name="Radio" value="class1" /> Value
            <input type="radio" name="Radio" value="class2"  /> Value
        </td>
    </tr>
    <tr class="class1 hidden">
        <td class="td-ctr">Only if Value 1</td>
        <td class="td-ct"><input type="text" name="SomeName" value="" /></td>
    </tr>
    <tr class="class2 hidden">
        <td colspan="2" class="td-ct">Online if Value 2</td>
    </tr
    ...

Answer 3

Not really an answer to your question, but a comment on the two other answers already present that are noting you cannot put DIVs in between your rows...

For this purpose, i.e., grouping related rows into a single element, you might be interested in the TBODY element,

<table>
    <tbody id="somegroup">
        <tr><td>...</td></tr>
        <tr><td>...</td></tr>
    </tbody>
    <tbody id="someOthergroup">
        <tr><td>...</td></tr>
        <tr><td>...</td></tr>
        <tr><td>...</td></tr>
        <tr><td>...</td></tr>
    </tbody>
</table>

Answer 4

You shouldn't really use the change events on the actual tags so that the code will gracefully degrade allowing both options to be visible. This code will also remember which radio is selected when the page is refreshed and display the correct section.

You cannot put a DIV tag in the middle of a TABLE like that either so I re-factored the code a bit for you.

<html>
    <head>
     <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
     <script type="text/javascript">
      $(document).ready(function() {
          $("tbody[id^='Value']").hide();
          $("input[name='Radio']").click(function(){
           change_selection();
       });
       change_selection();
      });

      function change_selection() {
       var selected_value = $("input[name='Radio']:checked").val();
          $("tbody[id^='Value']").hide();
          $("#" + selected_value).show();
      }
     </script>
    </head>
    <body>
     <form action="" method="post" id="SomeForm" />
      <table>
       <tbody>
           <tr>
               <td class="td-ctr">Size</td>
               <td class="td-ct"><input type="radio" name="Radio" value="Value1" checked="checked"/> Value <input type="radio" name="Radio" value="Value2" /> Value</td>
           </tr>
       </tbody>
       <tbody id="Value1">
           <tr>
               <td class="td-ctr">Only if Value 1</td>
               <td class="td-ct"><input type="text" name="SomeName" value="" /></td>
           </tr>
       </tbody>
       <tbody id="Value2">
           <tr>
               <td colspan="2" class="td-ct">Only if Value 2</td>
           </tr>
           <tr>
               <td class="td-ctr">SomeName1</td>
               <td class="td-ct"><input type="text" name="SomeName1" value="" /></td>
           </tr>       
           <tr>
               <td class="td-ctr">SomeName2</td>
               <td class="td-ct"><input type="text" name="SomeName2" value="" /></td>
           </tr>
           <tr>
               <td class="td-ctr">SomeName3</td>
               <td class="td-ct"><input type="text" name="SomeName3" value="" /></td>
           </tr>
           <tr>
               <td class="td-ctr">SomeName4</td>
               <td class="td-ct"><input type="text" name="SomeName4" value="" /></td>
           </tr>
           <tr>
               <td class="td-ctr">SomeName5</td>
               <td class="td-ct"><input type="text" name="SomeName5" value="" /></td>
           </tr>
           <tr>
               <td class="td-ctr">SomeName6</td>
               <td class="td-ct"><input type="text" name="SomeName6" value="" /></td>
           </tr>
           <tr>
               <td class="td-ctr">SomeName7</td>
               <td class="td-ct"><input type="text" name="SomeName7" value="" /></td>
           </tr>                                                                                                                                                               
       </tbody>
      </table>
     </form>

    </body>
</html>

Cheers, Dean