window.location.replace funktioniert nicht mit jquery

Question

Ich habe ein kleines Problem hier aus irgendeinem Grund. Ich habe eine andere Seite mit fast genau dem gleichen Code und es leitet den Benutzer auf die Seite um, auf die ich möchte. Aus irgendeinem Grund tut dies nicht. Ich habe versucht, die if-Anweisung und alles bis zu dem Punkt zu kommentieren, nur die window.location.replace mit der Klick-Aktion und immer noch kein Glück.

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

Sie verkennen, was location.replace() für verwendet wird. Zum Umleiten verwenden Sie stattdessen location.href.

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

Die location.replace() Methode ersetzt die aktuelle Ressource mit dem eine an der URL bereitgestellt. Der Unterschied zur Methode assign() besteht darin, dass nach der Verwendung von replace() die aktuelle Seite nicht im Sitzungsverlauf gespeichert wird, dh der Benutzer kann die Zurück-Schaltfläche nicht verwenden, um dorthin zu navigieren.

Sie müssen auch das Senden des Formulars verhindern. Dies führt dazu, dass die Seite an sich selbst zurückgesendet wird. Fügen Sie in Ihrem Formular den Ereignishandler submit hinzu.

e.preventDefault(); 

Answer 2

Sie müssen nur das Formular

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(); 
    } 
    }); 
});