How do I make a "input type text" go invisible with JavaScript?

Question

<input type="text" value="Text box"/>
<input type="button" onclick="toggle();"/>

How do I make the text box disappear and reappear with JavaScript?

Answer 1

put this code on page:

<script>
function toogle(id) {
       if (document.getElementById(id).style.visibility = 'hidden') {
            document.getElementById(id).style.visibility = 'visible'; 
       } else {
            document.getElementById(id).style.visibility = 'hidden'
       }
}
</script>

Now, just give a "id" element to your input tag, and pass this 'id' to the call of the javascript function on your button. Something like:

<input id="element1" type="text" value="Text box"/>
<input type="button" onclick="toggle('element1');"/>

Answer 2

JavaScript:

function toggle() {
  var element=document.getElementById('element1');

  if ( element.style.display!='none' ) {
    element.style.display='none';
  } else {
    element.style.display='';
  }
}

HTML:

<input id="element1" type="text" value="Text box"/>
<input type="button" onclick="toggle();"/>

Answer 3

JQuery provides some nice built-in functionality for this:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    function toggle() {
      $('#element1').toggle();
    }       
</script>