Javascript：重定向页面 onclick

Question

I'm fiddling around with a pretend "Logon screen" but am having trouble when it comes to redirecting the page.

I've tried a couple of different suggestions that I've found on the site, but so far nothing has worked.

I honestly think I'm just doing it wrong.

Any advice?

HTML

<div class="title"><h1>Webby Site</h1></div>
<div class="login-page">
  <div class="form">
    <form class="login-form">
      <input id="User" type="text" placeholder="username"/>
      <input id="PWord" type="password" placeholder="password"/>
      <button class="button">Login</button>
      <p class="message">Not registered? <a>Create an account</a></p>
    </form>
  </div>
</div>

JS

$(document).ready(function(){
       $('.button').click(function(){
            if ($('input#User').val() === "1" && $('input#PWord').val() === "1"){
            document.location.href = "www.yoursite.com";
            } else {
                alert('Incorrect Account Details');
            }
        });
    });

Code I've tried (in the same area as document.location.href )

1. document.location
2. window.location
3. window.location.href
4. location.href

Answer 1

By default, button acts like input type="submit" , so it's trying to submit your form. Use event.preventDefault() to avoid this behaviour.

Correct way to redirect is setting window.location.href .

Also, I strongly recommend not to try client-side authentification, because anyone could just read login and password in your js file.

Answer 2

For HTML, you can use <button onclick="location.href='url'">text</button>

You can also use <button onclick="window.location.replace(url)">text</button>