title: How to change the visibility of <div> tag using <form> tag and JavaScript for a "dummy" login?
body: <p>I have page main.html in it i have this code in the body tag:</p>
  
  <pre><code>   &lt;form method="post"&gt;
     &lt;p&gt;Username: &lt;input type="text" id="txt1" /&gt;&lt;/p&gt;
     &lt;p&gt;Password: &lt;input type="password" id="pwd1" /&gt;&lt;br/&gt;&lt;/p&gt;     
        &lt;p&gt;
            &lt;input onclick ="checkAdmin()" class = "login_button" type="submit" 
            name="btn1" value="Login" /&gt;
         &lt;/p&gt;
     &lt;/form&gt;
  </code></pre>
  
  <p>in outer .js file:
      function checkAdmin()
      {</p>
  
  <pre><code>document.getElementById("private_content").style.visibility="visible";
  
  }
  </code></pre>
  
  <p>in the css file i have:</p>
  
  <pre><code> .private_content {
           visibility: hidden
    }
  </code></pre>
  
  <p>i want to change the visibility to visibility when the user click on Login button.
  the problem is when i click on the login button the private part is visible for one moment and then disappear.</p>
  
  <p>BTW is there a list of all the common JavaScript functions? i didn't find a good one for 
  beginning with??</p>
  
  <p><strong>EDIT- the following code worked for me:</strong></p>
  
  <p>it looks much nicer and more convinent to use jQuery here is an example that do what i wanted to do, just with the <p> tag, it is the same idea.</p>
  
  <p><a href="http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide" rel="nofollow">http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide</a></p>
  
  <pre><code>  function onlyHeader(){
           $("div").hide();
          $("div#login").show();
    }
  
  $(document).ready(function(){
    onlyHeader();
    $("#login_button").click(function(){
      var user = $("#username").val();
      var pass = $("#password").val();
      var ret = checkUser(user,pass);
  
      if (ret) {
          $("div").show();
          $("div#login").hide();
      }
  
      else {
  
          //user is not authorized 
  
      }
  
  
      });
  
  });
  </code></pre>
  
  <hr>
  
  <h2>NOTE: You don't validate or store the a password on client side. On the server side you check for authentication, and store only the hash of the password.</h2>