window.location.replace not working with jquery

Question

I am having a little problem here for some reason. I have another page with almost the exact same code and it redirects the user to the page that I want them to go to. For some reason this one does not. I have tried commenting out the if statement and everything down to the point of just having the window.location.replace with the click action and still no luck.

JS

$(document).ready(() => {
      $("#login-button").click(() =>{
        if($("#pwd").val() === 'pass' && $("#username").val() === 'taylor') {
        alert("Welcome: " + $("#username").val());
        window.location.replace('../index.html');
        } else {
        alert("You have the wrong password and username");
      }
      });
    });

HTML

          <form id="login-form">
            <div class="form-group">
              <label for="username">Username:</label>
              <input type="text" class="form-control" id="username">
            </div>
            <div class="form-group">
              <label for="pwd">Password:</label>
              <input type="password" class="form-control" id="pwd">
            </div>
            <div class="checkbox">
              <label><input type="checkbox"> Remember me</label>
            </div>
            <button id="login-button" class="btn btn-danger">Login</button>

          </form>

Answer 1

You're mistaking what location.replace() is used for. To redirect, use location.href instead.

window.location.href = '../index.html';

The Location.replace() method replaces the current resource with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session History, meaning the user won't be able to use the back button to navigate to it.

You also need to prevent the form submit. This is causing the page to be posted back to itself. Add the following inside your form submit event handler.

e.preventDefault();

Answer 2

You just need to stop the default form submit

html

<form id="login-form">
  <div class="form-group">
    <label for="username">Username:</label>
    <input type="text" class="form-control" id="username">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me</label>
  </div>
  <button id="login-button" class="btn btn-danger">Login</button>

</form>

jQuery

$(function() {
  $("#login-button").click((e) {
    if ($("#pwd").val() === 'pass' && $("#username").val() === 'taylor') {
      alert("Welcome: " + $("#username").val());
      window.location.href('../index.html');
      e.preventDefault();
    } else {
      alert("You have the wrong password and username");
      e.preventDefault();
    }
  });
});