CODEWITHSUNDEEP
javascript
Anonymous the Great
Anonymous the Great

Reputation: 1669

How do I make a "input type text" go invisible 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?

Upvotes: 2

Views: 23348

Answers (3)

Gabriel L. Oliveira
Gabriel L. Oliveira

Reputation: 4062

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

Upvotes: 2

Turnkey
Turnkey

Reputation: 9406

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>

Upvotes: 1

Gert Grenander
Gert Grenander

Reputation: 17084

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

Upvotes: 4

Related Questions