CODEWITHSUNDEEP
javascript
Ash
Ash

Reputation: 183

Show/Hide a form in JavaScript

I'm trying to hide and show "form1". But even simply hiding doesn't work.
Where is the mistake?

<body>

    <script type="text/javascript">
        document.getElementById("F1").style.visibility = "hidden";
    </script>

    <form id="F1" name="form1">
        <p class="style14">blah-blah
            <input type="text" size="1" name="rd"> blah
        </p>
    </form>

</body>

Upvotes: 3

Views: 142

Answers (4)

iConnor
iConnor

Reputation: 20189

Firstly you need to make sure your script tag is at the bottom of the body or use the DOMContentLoaded event

like so

document.addEventListener('DOMContentLoaded', function(){
   var form = document.getElementById('F1');

   form.style.visibility="hidden"; 
   // OR
   form.style.display = 'none';
});

Your F1 needs to be a string, right now you're referring to a undefined variable.

And I also recommend using display instead of visibility

@update to comment.

The opposites of them are

visibility: visible;

AND

display: block; // Or whatever

Upvotes: 4

Towler
Towler

Reputation: 1562

F1 should be wrapped in quotes. You also might need to encompass your code within the onload function

window.onload = function(){
    document.getElementById("F1").style.visibility = "hidden";
}

Upvotes: -1

Zz Oussama
Zz Oussama

Reputation: 229

This line is wrong 

document.getElementById(thediv).style.visibility="hidden";

What is "thediv" you should use :

document.getElementById("F1").style.visibility="hidden";

Upvotes: 1

synthrom
synthrom

Reputation: 430

Try document.getElementById("F1").style.visibility=hidden;

Upvotes: -1

Related Questions