I'm fiddling around with a pretend "Logon screen" but am having trouble when it es 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";
            } 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

I'm fiddling around with a pretend "Logon screen" but am having trouble when it es 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.";
            } 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

• javascript

Share Improve this question Follow asked Oct 5, 2016 at 3:10 AsteriaAsteria 33033 gold badges55 silver badges2323 bronze badges 2

• Could you reproduce this problem at JSFiddle, please? – Yeldar Kurmangaliyev Commented Oct 5, 2016 at 3:11
• @YeldarKurmangaliyev unfortunately, while it works okay otherwise in Chrome, it doesn't work at all in JSFiddle. I get "{"error": "Please use POST request"}". But I can make one anyway, if it would help? – Asteria Commented Oct 5, 2016 at 3:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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 remend not to try client-side authentification, because anyone could just read login and password in your js file.

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

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