Dynamiccly show/hide text boxes

stewdizzle

New Member

Join Date: Apr 2009
Posts: 6

Dynamiccly show/hide text boxes

Apr 25 '09, 04:51 PM

I have a from with three radio buttons (same group) and three text boxes. The radio buttons give the user a choice of uploading one, two, or three images. Currently, I have the text boxes load as disabled and the radio button selection enables the needed text boxes. It works but...

I don't want to see the text boxes unless they are needed and I want the user to be able to change their mind. (ie choose three images or go back to one image)

this is what I am using right now:

Code:

<table width="800px"> 
<tr>
<td>
<!--Select how many images and disable unused text boxes--> 
<form action="code.php" method="post">
<input type="radio" name="myRadioButton" value="1" onclick="image1.disabled=false;" /> 1 Picture
<input type="radio" name="myRadioButton" value="2" onclick="image1.disabled=false; image2.disabled=false;"/> 2 Pictures
<input type="radio" name="myRadioButton" value="3" onclick="image1.disabled=false; image2.disabled=false; image3.disabled=false" /> 3 Pictures



<!--Information-->
  
  <p>Enter the Auction Title:
  <input type="text" name="title"  cols="50" />
  
  <br />
  <br />
    Enter A Description: 
  <textarea cols="50" rows="10" wrap="soft" name="description"></textarea>
  <br />
  <br />
    Enter the URL for Image 1: <input type="text" name="image1" disabled="disabled" />
  <br />
  <br />
    Enter the URL for Image 2: <input type="text" name="image2" disabled="disabled" />
  <br />
  <br />
    Enter the URL for Image 3: <input type="text" name="image3" disabled="disabled" />
  
  </p> 
  <p>
    
    
    
    
    <input type="submit" name="submit1" value="Generate Auction Code"/>
  </p>
  
</form>
</td>
</tr>
</table>

Tags: None

gits

Recognized Expert Moderator Expert

Join Date: May 2007
Posts: 5390

Apr 26 '09, 11:56 AM

you may use the style.display property to do so ... let me give you a simple example for it:

Code:

<html>
<head>
<script type="text/javascript">
function toggleVisibility(checkbox, nodeId) {
    var node = document.getElementById(nodeId);
    node.style.display = checkbox.checked ? 'block' : 'none';
}
</script>
<body>
    <input type="checkbox" onclick="toggleVisibility(this, 'foo');"/>
    <input type="text" id="foo" style="display: none;"/>
</body>
</html>

kind regards

Dynamiccly show/hide text boxes

Dynamiccly show/hide text boxes

Comment