asked on

How to hide text box by javascript

Dear experts,

I have a form that include 3 different text box along with their radio input for each one.

what I want is that when the user click in the first radio input then it text appear and the other are hidden and when the user click the second radio then it text box appear and others are hidden.

I attached three different photos that describe what I want to do , the photos were edited by Photoshop. And also I attached the form code.

Thanks in advance.
Regards.

<form method="POST" name="test">
	<div align="center">
		<table border="0" width="500">
			<tr>
				<td><input type="radio" value="V1" name="R1" checked>option 1
				</td>
				<td><input type="radio" value="V1" name="R1">option 2 </td>
				<td><input type="radio" value="V1" name="R1">option 3 </td>
			</tr>
			<tr>
				<td>
	<input type="text" name="T1" size="20" value="text1"></td>
				<td>
	<input type="text" name="T2" size="20" value="text2"></td>
				<td>
	<input type="text" name="T3" size="20" value="text3"></td>
			</tr>
		</table>
	</div>
	<p align="center"><input type="submit" value="Submit" name="B1"></p>
</form>

Open in new window

1.gif
2.gif
3.gif

HonorGod

Put the text box (and anything else) in a <div> ... </div> section.
Have the div include an id attribute:

<div id='here'>
...
</div>

function Hide( id ) {
  var div = document.getElementById( id )
  if ( div ) {
    div.style.display = 'none'
  }
}

Open in new window

ASKER CERTIFIED SOLUTION

Lee

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

HonorGod

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tree_PRO

ASKER

Thank you, Both of your answers were useful for me :)

HonorGod

Thank you for the assist & the points.

Good luck & have a great day