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>

Sure you have jquery included?

u_mulder
– u_mulder

2016-12-10 22:16:35 +00:00
Commented Dec 10, 2016 at 22:16 — u_mulder
– u_mulder, Commented Dec 10, 2016 at 22:16

Soviut · Accepted Answer · 2016-12-10 22:16:31Z

6

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

answered Dec 10, 2016 at 22:16

Soviut

92.2k53 gold badges210 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tbaustin Over a year ago

Tried replacing location.replace with the location.href = '.../index.html'; and getting the same results, just does nothing. I am also adding the e.preventDefault();

Tbaustin Over a year ago

I just needed to add the e inside the click function parameters and it worked thank you so much.

code_monk Over a year ago

i thought this was correct too, but apparently location.replace() is a valid approach

Canvas · Accepted Answer · 2017-11-26 16:14:56Z

1

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

edited Nov 26, 2017 at 16:14

answered Dec 10, 2016 at 22:16

Canvas

5,9159 gold badges60 silver badges103 bronze badges

1 Comment

Tbaustin Over a year ago

This worked forgot to put the e inside of the click function at first. Thank you!

Collectives™ on Stack Overflow

window.location.replace not working with jquery

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related