'Getting page to redirect to a new html file after entering correct login info?

I'm building a clone of the instagram login page for class and trying to figure out why my login page does not automatically re-direct to the feed (I've saved in another html file) after the correct login information is entered. I've googled several variations of how to write this in javascript but none have worked for me thus far.

My code:

const loginCombos = {
    nat: 'natpass',
    dog: 'dogpass',
    cat: 'catpass',
    clown: 'clownpass'
};

function validate() {
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;
    const userExists = loginCombos.hasOwnProperty(username)
    const rightPass = loginCombos[username] === password

    if (userExists && rightPass) {
        alert('Login Successful');
        window.location.replace('/feed.html');
        return false;
        } else {
        alert('Sorry, your username or password was incorrect. Please double-check your login information and try again.')
        return false;
        }
}

<div class="container">

  <div class="box">

    <div class="heading"></div>
    <form class="login-form" id="login" method="POST">
      <div class="field">
        <input id="username" type="text" placeholder="Phone number, username, or email"/>
        <label for="username">Phone number, username, or email</label>
      </div>

      <div class="field">
        <input id="password" type="password" placeholder="password"/>
        <label for="password">Password</label>
      </div>

      <button class="login-button" title="login" onclick="validate()">Log In</button>

      <div class="separator">
        <div class="line"></div>
        <p>OR</p>
        <div class="line"></div>
      </div>

      <div class="other">

        <button class="fb-login-btn" type="button">
          <i class="fa fa-facebook-official fb-icon"></i>
          <span class="">Log in with Facebook</span>
        </button>

        <a class="forgot-password" href="#">Forgot password?</a>

      </div>

    </form>
  </div>

  <div class="box">
    <p>Don't have an account? <a class="signup" href="#">Sign Up</a></p>
  </div>
</div>

Solution 1:^[1]

You have to add onsubmit method in form element and make sure add event.preventDefault() method, here i provide you code. Please check what you did mistakes.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="container">
        <div class="box">
            <div class="heading"></div>
            <form class="login-form" id="login" onsubmit="validate(event)">
            <div class="field">
                <input
                id="username"
                type="text"
                placeholder="Phone number, username, or email"
                />
                <label for="username">Phone number, username, or email</label>
            </div>

            <div class="field">
                <input id="password" type="password" placeholder="password" />
                <label for="password">Password</label>
            </div>

            <button class="login-button" title="login">Log In</button>

            <div class="separator">
                <div class="line"></div>
                <p>OR</p>
                <div class="line"></div>
            </div>

            <div class="other">
                <button class="fb-login-btn" type="button">
                <i class="fa fa-facebook-official fb-icon"></i>
                <span class="">Log in with Facebook</span>
                </button>

                <a class="forgot-password" href="#">Forgot password?</a>
            </div>
            </form>
        </div>

        <div class="box">
            <p>Don't have an account? <a class="signup" href="#">Sign Up</a></p>
        </div>
        </div>
    </body>
    <script src="script.js"></script>
</html>

script.js

const loginCombos = {
    nat: "natpass",
    dog: "dogpass",
    cat: "catpass",
    clown: "clownpass",
};

function validate(event) {
    console.log("submit", event);
    event.preventDefault();
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;
    const userExists = loginCombos.hasOwnProperty(username);
    const rightPass = loginCombos[username] === password;

    if (userExists && rightPass) {
        alert("Login Successful");
        window.location.href = "http://google.com";
    } else {
        alert(
        "Sorry, your username or password was incorrect. Please double-check your login information and try again."
        );
    }
}

Solution 2:^[2]

Try assigning direct path like, window.location = ./feed

const loginCombos = {
    nat: 'natpass',
    dog: 'dogpass',
    cat: 'catpass',
    clown: 'clownpass'
};

function validate() {
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;
    const userExists = loginCombos.hasOwnProperty(username)
    const rightPass = loginCombos[username] === password

    if (userExists && rightPass) {
        alert('Login Successful');
        window.location = '/feed.html';
        return false;
        } else {
        alert('Sorry, your username or password was incorrect. Please double-check your login information and try again.')
        return false;
        }
}

<div class="container">

  <div class="box">

    <div class="heading"></div>
    <form class="login-form" id="login" method="POST">
      <div class="field">
        <input id="username" type="text" placeholder="Phone number, username, or email"/>
        <label for="username">Phone number, username, or email</label>
      </div>

      <div class="field">
        <input id="password" type="password" placeholder="password"/>
        <label for="password">Password</label>
      </div>

      <button class="login-button" title="login" onclick="validate()">Log In</button>

      <div class="separator">
        <div class="line"></div>
        <p>OR</p>
        <div class="line"></div>
      </div>

      <div class="other">

        <button class="fb-login-btn" type="button">
          <i class="fa fa-facebook-official fb-icon"></i>
          <span class="">Log in with Facebook</span>
        </button>

        <a class="forgot-password" href="#">Forgot password?</a>

      </div>

    </form>
  </div>

  <div class="box">
    <p>Don't have an account? <a class="signup" href="#">Sign Up</a></p>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dhavalkumar Panchal
Solution 2	Uttam

'Getting page to redirect to a new html file after entering correct login info?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]