Javascript - Simple Login Redirection

Question

Been reading some JavaScript tutorials and attempted to make a simple login system. I used the following code for this purpose. The alert line properly executes but redirection line doesn't seem to produce any results.

Question: How can I make it work? What is wrong with the code?

Note: I am aware that this is not a secure login system. I just need it to properly redirect when different conditions are met.

I also tried different syntaxes for redirection line (removing quotes, parentheses, etc.). None of them seemed to work… in case this is just a syntax error.

Code:

<form name="loginForm" onsubmit="loginCheck()" method="post">
    <input type="text" name="userName"><br>
    <input type="text" name="passWord"><br><br>
    <input type="submit" value="Login">
</form>

<script>
function loginCheck() {
    var usr=document.loginForm.userName.value;
    var psw=document.loginForm.passWord.value;
    var username="admin";
    var password="admin";
    if ((usr==username) && (psw=password)) {
        alert ("True Info");
        window.location.href ("http://www.google.com");
        return true;
    }
    else {
        alert ("False Info");
        window.location.href ("http://www.google.com");
        return false;
    }
}
</script>

Answer 1

There are three problems:

1. href is a string, not a function, so calling it as a function will throw an except and abort the script
2. You aren't returning false from the event handler, so the form will submit and override anything you were to do to location
3. You have an assignment where you are trying to perform a comparison

To fix this:

1. Assign a value to location: location = "http://www.google.com/";
2. Return from your event handler: onsubmit="return loginCheck();"
3. Be careful about where you use = and == .

---

Note that intrinsic event attributes were how we wrote JavaScript in the 90s. Coding practises have improved and we can now separate concerns with unobtrusive JavaScript .

 function loginCheck(event) { var usr = this.elements.userName.value; var psw = this.elements.passWord.value; var username = "admin"; var password = "admin"; if ((usr == username) && (psw == password)) { alert("True Info - submitting form"); } else { alert("False Info - going to Google"); location = "http://www.google.com"; event.preventDefault(); } } document.getElementById('loginForm').addEventListener('submit', loginCheck); 

 <form id="loginForm" method="post"> <input type="text" name="userName"> <br> <input type="text" name="passWord"> <br> <br> <input type="submit" value="Login"> </form> 

---

Also, please note, that trying to do authentication entirely client side is a fool's errand. It can be used for an example of basic event handling, but should never be tried in practise.

Answer 2

Here is an issue:

if ((usr==username) && (psw=password)) {

Notice the single = sign? This means you are assigning, and not comparing.

if ((usr==username) && (psw==password)) {

Change to the above and see if it works then.

Answer 3

Just use:

window.location.href = "http://www.google.com";

It is an object, not a function.