Question

I have page main.html in it i have this code in the body tag:

   <form method="post">
   <p>Username: <input type="text" id="txt1" /></p>
   <p>Password: <input type="password" id="pwd1" /><br/></p>     
      <p>
          <input onclick ="checkAdmin()" class = "login_button" type="submit" 
          name="btn1" value="Login" />
       </p>
   </form>

in outer .js file:
function checkAdmin()
{

document.getElementById("private_content").style.visibility="visible";

}

in the css file i have:

 .private_content {
         visibility: hidden
  }

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.

BTW is there a list of all the common JavaScript functions? i didn’t find a good one for
beginning with??

EDIT- the following code worked for me:

it looks much nicer and more convinent to use jQuery here is an example that do what i wanted to do, just with the

tag, it is the same idea.

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide

  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 

    }


    });

});

---

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.

Answer 1

I want to change the visibility to visibility when the user click on Login button.

Do that server side. If the user is logged on then don’t show the form.

the problem is when i click on the login button the private part is visible for one moment and then disappear.

This is what happens:

1. You modify the DOM so the form becomes invisible
2. The browser submits the form (since there is no action attribute it error recovers and uses the current URI as the action). There are various ways to stop the default behaviour from happening when you attach an event handler to something, but you don’t use any of them.
3. The browser loads a new page, identical the old one, with the DOM reset to its initial state (with the form visible)

Once you have processed the form data (to determine if the credentials are correct and to log the user in if they are) then use the “logged in” state on the server to decide not to include the form markup in the page at all. There is no need (or benefit) to use JS here.

BTW is there a list of all the common JavaScript functions?

See Mozilla’s developer content

I didn’t find a good one for beginning with??

W3C has an introduction to web standards that includes some JS content.