Hiding/Showing Rows
I need help figuring out how to show/hide rows in a table based on a selected option in a form. An example (slop code and not the actual data collected) is below to demonstrate:
<form ...... >
<table>
<tr>
<td>Name:</td>
<td><input name="user" type="text"></td>
</tr>
<tr>
<td>Contact:</td>
<td>
<input name="contact" value="phone" type="option">Phone
<input name="contact" value="email" type="option">EMail
</td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="phone" type="text"></td>
</tr>
<tr>
<td>EMail:</td>
<td><input name="email" type="text"></td>
</tr>
<tr>
<td>Other:</td>
<td>Other information collected</td>
</tr>
</table>
</form>In this situation, i would like it that if you chose "PHONE" as a contact method, the row with phone text input shows up and the e-mail one hides, and just the opposite for if they choose EMAIL.
Any help, including links to sites that have something like this already would be greatly appreciated!
-Greg
PS. in the above example, I know a simple solution would just be to have one input field and just change what the title for the input is, however on my application, there will actually be several different input items for each type
Suzanne posted this at 21:34 — 2nd April 2004.
She has: 5,507 posts
Joined: Feb 2000
why only have one contact method?
Greg K posted this at 21:59 — 2nd April 2004.
He has: 2,145 posts
Joined: Nov 2003
This isn't the actual data collected, I just used that for an example. The real program collects employee data that has many different inputs based on the type of employee they are at the company.
Suzanne posted this at 22:02 — 2nd April 2004.
She has: 5,507 posts
Joined: Feb 2000
Ah-- you need to disable some input based on other pieces?
You can do this with JavaScript, but I prefer not to, I think it's more secure to have multi-form data entry (or to reload the page with new options), than to disable or hide rows. I know this has been answered here a few times (using JavaScript).
Suzanne posted this at 22:03 — 2nd April 2004.
She has: 5,507 posts
Joined: Feb 2000
http://www.google.com/search?q=javascript+disable+form+elements for using JavaScript, lots of options.
Greg K posted this at 22:11 — 2nd April 2004.
He has: 2,145 posts
Joined: Nov 2003
I think I found it, I modified your link to google to include the word HIDE and found a few good samples. I was originally thinking I would need to hide/show the entire row, but realized I just need to put both items in the same row and hide/show the actual items. Think I'm a better track to get this acomplished.
Thank you!
-Greg
Vincent Puglia posted this at 03:45 — 3rd April 2004.
They have: 634 posts
Joined: Dec 1999
Hi,
Place the contact stuff in a select element, based on the user's selection, change either the visibility or content of a div.
<?php<tr>
<div id='contact1' style='display:none'>
<td>Phone:</td>
<td><input name=\"phone\" type=\"text\"></td>
</div>
<div id='contact2' style='display:block'>
<td>EMail:</td>
<td><input name=\"email\" type=\"text\"></td>
</tr>
?>
Vinny
Where the world once stood
the blades of grass cut me still
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.