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

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

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

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

• javascript

Share Improve this question Follow edited Jun 10, 2010 at 2:13 Gert Grenander 17.1k66 gold badges4141 silver badges4343 bronze badges asked Jun 10, 2010 at 2:11 Anonymous the GreatAnonymous the Great 1,66955 gold badges1515 silver badges1818 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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();"/>

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');"/>

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>