CODEWITHSUNDEEP
javascripthtmldom-eventstextarea
arok
arok

Reputation: 107

How to use JavaScript to hide a text area

When I Click on the button a textarea appear allowing the user to type the message. After they type a message I want textarea to hide.

Can any one help me how to hide the textarea after entering the message?

This my Javascipt code:

        <script>
        function showDiv1() {
        document.getElementById('welcomeDiv1').style.display = "block";
                            }
        </script>

This my html code:

       <div> <span style="display: inline-block;text-align: center; margin:-73px 0px -10px 61px; "><a href ="#"><img src="/wp-content/uploads/2013/03/reject_5.jpg" width="60" height="60" style="margin:0px 0px 0px 0px"  value="Show Div" onclick="showDiv()"/></a><br />Decline</span></div>
       <textarea id="welcomeDiv"  style=" display:none; border:1px solid #666666; height:70px; margin:16px 0 0 8px " class="answer_list" title="Message to Employer" onFocus="this.value=''" > Message to Employer </textarea>

Upvotes: 3

Views: 41460

Answers (5)

ELAYARAJA
ELAYARAJA

Reputation: 521

Replace visibility:hidden with display: none :

<textarea name="txtReason" id="txtReason" style="display: none;" class="textboxmulti">
</textarea>

and then show it by setting it to block:

this.form['txtReason'].style.display = 'block';

Additionally, you may want to look at jQuery which makes these kind of things extremely easy.

Upvotes: 1

Thomas Junk
Thomas Junk

Reputation: 5676

What about setting the display to "none" after the user changed the input of the textarea. You may have a look at http://jsfiddle.net/PnfLS/

document.getElementById("textbox").addEventListener("change", function(){
document.getElementById("textbox").style.display = "none";
});

Upvotes: 0

GautamD31
GautamD31

Reputation: 28773

Try like this

<script>
    function showDiv1() {
        var my_disply = document.getElementById('welcomeDiv1').style.display;
        if(my_disply == "block")
              document.getElementById('welcomeDiv1').style.display = "none";
        else
              document.getElementById('welcomeDiv1').style.display = "block";
     }
</script>

It is the simple way of toggling the div using only one function,Ofcourse in JQuery there is only one thing you can do is 'toggle' the div

Upvotes: 10

Mark Walters
Mark Walters

Reputation: 12400

run this function on the onchange event of the textarea

function hideMe(){
   document.getElementById('welcomeDiv1').style.display = "none";
}

This completely removes the textarea so that it is hidden and also takes up no space on the page. If you want to hide it but for the space the textarea takes up to remain use .style.visibility = 'hidden' instead

Upvotes: 0

Linga
Linga

Reputation: 10573

Try this:

document.getElementById('welcomeDiv1').style.visibility = "hidden";

Upvotes: 0

Related Questions