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

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 >

  <div >

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

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

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

      <div >
        <div ></div>
        <p>OR</p>
        <div ></div>
      </div>

      <div >

        <button  type="button">
          <i ></i>
          <span >Log in with Facebook</span>
        </button>

        <a  href="#">Forgot password?</a>

      </div>

    </form>
  </div>

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

CodePudding user response：

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 >

  <div >

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

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

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

      <div >
        <div ></div>
        <p>OR</p>
        <div ></div>
      </div>

      <div >

        <button  type="button">
          <i ></i>
          <span >Log in with Facebook</span>
        </button>

        <a  href="#">Forgot password?</a>

      </div>

    </form>
  </div>

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

CodePudding user response：

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 >
        <div >
            <div ></div>
            <form  id="login" onsubmit="validate(event)">
            <div >
                <input
                id="username"
                type="text"
                placeholder="Phone number, username, or email"
                />
                <label for="username">Phone number, username, or email</label>
            </div>

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

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

            <div >
                <div ></div>
                <p>OR</p>
                <div ></div>
            </div>

            <div >
                <button  type="button">
                <i ></i>
                <span >Log in with Facebook</span>
                </button>

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

        <div >
            <p>Don't have an account? <a  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."
        );
    }
}