How do you load a separate .html page with Javascript

Question

I am trying to figure out how to send a user to another page I design after they have input the correct password. I don't know how to load the page with a JavaScript Command. How could i use the code below to open a new page titled insideVault.html?

I have tried many google searches, but cant find any resources to help me out with this.

// login code //
   <div class = "container">
        <div class = "passwordEnter">
          <div class = "text-center">
            <form id="login" onsubmit="return passCheck()" method="get">
            <p> Enter Password </p>
            <input type="password" name="password" id = "password">
            <input type="submit">
            </form>
          </div>
        </div>
      </div>
    <script src="script.js"></script>
    </div>
    <script>
      function passCheck(){

  var input = document.getElementById("password").value == 'test';  
  console.log(input);
  if(!input){
        alert('Password incorrect, please try again.');
        return false;
    }

    return true;
}

I want the code to load a new page, but so far I have not been able to find any code that would allow me to do this.

score 0 · Answer 1 · answered Oct 22 '19 at 03:26

Try location.href:

function passCheck(){

  var input = document.getElementById("password").value == 'test';  
  console.log(input);
  if(!input){
        alert('Password incorrect, please try again.');
        return false;
    }
  location.href = 'insideVault.html';
}

score 0 · Answer 2 · answered Oct 22 '19 at 04:15

In Javascript, you can use many methods to redirect a web page to another one. Almost all methods are related to window.location object, which is a property of the Window object. It can be used to get the current URL address (web address) and to redirect the browser to a new page.

Example :

<html>
<head>
  <script>
    function newLocation() {
        window.location="http://www.w3.org";
    }
  </script>
</head>
<body>
  <input type="button" value="Go to new location" onclick="newLocation()">
</body>
</html>

How do you load a separate .html page with Javascript

2 Answers2