window.location = "location.html";

Issue

Essentially, I am trying to get my web page to redirect upon successful login. I have the successful login working, it doesn't redirect to the new page afterwards. It refreshes the current page it is on.

The form I am using to take the user input.

<!-- Login Details -->
  <form name = "loginForm" onsubmit = "validate(this);">
    <p> 
        <label for = "username"> Username: </label> 
        <input type = "text" id = "username" name = "user"/> 
    </p>

    <p> <label for = "password"> Password: </label> 
        <input type = "password" id = "password" name = "pass" required/>
    </p>

    <p class = "submit"> 
        <input type = "submit" value = "Submit"/> 
    </p>
</form>

And now for the JavaScript side of it;

var user = form.user.value;
var pass = form.pass.value;
var valid = false;

var userArray = ["admin", "kevin", "mark", "paul", "conor"];        // ("admin1", "admin2", "admin3") As many as you like - no comma after final entry.
var passArray = ["pass", "pass1", "pass2", "pass3", "pass4"];   // ("Password1", "Password2", "Password3") the corresponding passwords;

for (var i = 0; i < userArray.length; i++) 
{
    if ((user == userArray[i]) && (pass == passArray[i])) 
    {
        valid = true;
        //alert("Login was successful");
        break;
    }
}

if (valid == true)
{
    alert ("Login was successful");
    window.location = 'mainmenu.html';
    return false;
}

I have tried the new location by using both double and single quotes. Neither is working. Appreciate the help :)

Solution

You are submitting the form. You haven't specified an action, so it submits to the current page. This happens before the location assignment has any effect.

With your current approach, to fix it return false from onsubmit (i.e. the function that calls validate) so the the normal behaviour of the form submission is canceled.

---

That said:

• Putting all your authentication information on the client is entirely insecure and you should never do it.
• Intrinsic event attributes like onsubmit are how we did JS event binding in the 90's. We now have addEventListener (see also preventDefault).

Answered By - Quentin