Simple Javascript login form

Question

<form id="loginForm"> 
 <p id="usernameLabel">Username:</p>
 <input type="text" name="username" id="username" placeholder="username"/><br>
 <p id="passwordLabel">Password: </p>
 <input type="password" name="password" id="password" placeholder="password"/><br>
 <input id="loginButton" type="submit" value="Login!" onsubmit="validateForm()">
</form>
<p id="loginMessage">Please Login!</p>
<script type="text/javascript">
 function validateForm() {
 var un = document.loginForm.username.value;
 var pw = document.loginForm.password.value;
 var username = "MitchWardle"; 
 var password = "123abc456";
 if ((un == username) && (pw == password)) {
 window.location = "content.html";
 return false;
 }
 else {
 alert ("Login was unsuccessful, please check your username and password");
 }
 }
</script>

I have created a little login form on Javascript and I want it to navigate to Content.html when username and password are correct but when I click my Login button it just removes the text from the text box's, can anybody see whats wrong?

Answer 1

Just a couple things are off, but it's almost there:

• The onsubmit handler is used at the form level. Either move the onsubmit to the <form> element or change it to an onclick event for the <input> element.
• In order to reference the text fields the way you are, the <form> element also needs a name attribute. i.e. name="loginForm"

• Jason E. Wall: Moving the onsubmit to the <form> element will still allow the enter key to submit the login. @Charly's answer reminded me of this.

Answer 2

you need to return false to prevent default action of submitting the form , page gets refresh andyou loss your data, you can set type of submit button to

 type="button" 

or can change onsubmit to

onclick="validateForm(); return false; "

Answer 3

Do this:

1. Remove onsubmit from button add it to form.
2. Change id of form to name.
3. In the onsubmit of form append return false;.
4. Remove return false; from the if statements.

5. Change document.loginForm line to this:

   document.forms['loginForm'].elements['username'].value //username/password depends.
   

Hope it works.

Answer 4

I have had the same problem as you before, and I solved it by changing the submit button to <input type="button" onclick="login();" />, and everything worked. However, the user then cannot submit the form with enter key (because there's no submit button in the form).