Hide or Display table rows depending on radio button selection

I have a form that is built into a table (like most forms are) and I want to hide a few of the form fields (or table rows) based on the option selected from a small grouping of radio buttons.   For example, say it's a registration form.  If the radio buttons give the user an option for number of registrants, based on their input there will be corresponding fields shown later in the form.  If their selection is "2", then there will be two "name" fields, etc.   Hopefully this description didn't over complicate.  Basically I just want to hide a <div> based on one selection and restore it based on the other.  Only two total options.   This is probably pretty easy for a savvy AJAX expert, but I'm just learning it.   Thanks in advance.
benjaminfamAsked:
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.

imantasCommented:
I don't think you need AJAX here. Simple javascript would be enough. Add onclick event handler on your radio buttons, which would hide or show the div.

Here's a simple example I've just wrote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Blank page</title>
</head>
<body>
<input type="radio" name="rb" value="1" id="rb1" selected="selected" onclick="document.getElementById('foo').style.display = 'block'"/><label for="rb1">Show div</label><br/>
<input type="radio" name="rb" value="2" id="rb2" onclick="document.getElementById('foo').style.display = 'none'" /><label for="rb1">Hide div</label>

<div id="foo">
  I'm visible!
</div>
</body></html>

Open in new window


(this is a full HTML page - save it as HTML and open in a browser)
0

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
imantasCommented:
Little mistake: attribute "for" of the second label should be "rb2" instead of "rb1".
0
ProculopsisCommented:

Try something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26933020.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $("input[name=registrants]").click( registrants );
  configure( 1 );
 
});

function registrants() {
  configure( $(this).val() );
}

function configure( value ) {
  $(".registrant").each( function( index ) {
    if ( index < value ) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
}

</script>
</head>
<body>

Registrants
<input type="radio" name="registrants" value="1" checked="true" /> 1
<input type="radio" name="registrants" value="2"  /> 2
<input type="radio" name="registrants" value="3"  /> 3

<table border="1">
<tr class="registrant"><td>Registrant 1</td><td>Name</td><td><input /></td></tr>
<tr class="registrant"><td>Registrant 2</td><td>Name</td><td><input /></td></tr>
<tr class="registrant"><td>Registrant 3</td><td>Name</td><td><input /></td></tr>
</table>

</body>
</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

benjaminfamAuthor Commented:
Thank you for your replies this far.

Imantas, your solution worked as stand-alone code, but it didn't work when the DIV was wrapped around a block of rows in my table.   Not sure why.

Proculopsis, your solution also worked as stand-alone code, but I'm not sure how to apply it to a block of rows rather than one or more single rows.  

Perhaps it would be helpful if I gave you a better visual of what I'm trying to accomplish.  Please take a moment to look at a simplified version of my aspiration at http://pbu.edu/events/golfclassic/test.html.  I want the "additional players" block to only render if the selection at the top is "foursome".  The code looks something like the code below.  How can I toggle the four rows beginning with "additional players", with it defaulting to NOT show unless "foursome" is checked?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<table border="0" cellspacing="0">
  <tr>
    <td align="right"><input type="radio" name="participant_level" value="golfer" checked="checked" /></td>
    <td align="left"><strong>Golfer - Single</strong></td>
  </tr>
  <tr>
    <td align="right"><input type="radio" name="participant_level" value="foursome" /></td>
    <td align="left"><strong>Golfers - Foursome</strong></td>
  </tr>
  <tr>
    <td align="right"><strong><font color="RED">*</font> Full Name:</strong></td>
    <td align="left"><input name="fullName" type="text" id="fullName" size="25"></td>
  </tr>
  <tr>
    <td align="right"><strong>Preferred Shirt Size</strong></td>
    <td align="left"><select name="shirt_size2" id="shirt_size2">
            <option>--size--</option>
            <option value="SM">SM</option>
            <option value="MD">MD</option>
            <option value="LG">LG</option>
    </select>
    </td>
  </tr>
  <div id="foo">
    <tr>
      <td align="right"><strong>Additional Players:</strong></td>
      <td align="left">&nbsp;</td>
    </tr>
    <tr>
      <td align="right"><strong>Player 2 Name:</strong></td>
      <td align="left"><input name="fullName2" type="text" id="fullName2" size="25">
          <select name="shirt_size" id="shirt_sizeP2">
            <option>--size--</option>
            <option value="SM">SM</option>
            <option value="MD">MD</option>
            <option value="LG">LG</option>
          </select>
      </td>
    </tr>
    <tr>
      <td align="right"><strong>Player 3 Name:</strong></td>
      <td align="left"><input name="fullName3" type="text" id="fullName3" size="25">
          <select name="shirt_size" id="shirt_sizeP3">
            <option>--size--</option>
            <option value="SM">SM</option>
            <option value="MD">MD</option>
            <option value="LG">LG</option>
          </select>
      </td>
    </tr>
    <tr>
      <td align="right"><strong>Player 4 Name:</strong></td>
      <td align="left"><input name="fullName4" type="text" id="fullName4" size="25">
          <select name="shirt_size" id="shirt_sizeP4">
            <option>--size--</option>
            <option value="SM">SM</option>
            <option value="MD">MD</option>
            <option value="LG">LG</option>
          </select>
      </td>
    </tr>
  </div>
  <tr>
    <td align="right">&nbsp;</td>
    <td align="left"><div align="center">
        <input type="submit" name="proceed" value="Continue &gt;&gt;" /></td>
  </tr>
</table>
</body>
</html>


0
imantasCommented:
Actually your code is not valid. You cannot surround table rows with a "DIV" within the table itself. You should hide the rows then or create separate tables for each block of options and hide whole tables.
0
benjaminfamAuthor Commented:
imanta, thanks.  You were right.  I separated those rows into a separate table and it enabled them to be toggled based on the selection.  Now the only problem is that they should be toggled OFF by default based on the fact that the option on the radio button that is initially selected by default is the one that specifies that the rows aren't needed.   Can that div/block be toggled off based on a radio button's initial property of "checked"?
0
imantasCommented:
In the same way you initiate a value for a radio (selected="selected" or similar), you can also do the same for the DIV/block (style="display: none" or similar - not sure how do you hide it).
0
benjaminfamAuthor Commented:
Thanks so much.  Got it working just right.
0
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
AJAX

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.