Open target.html page within SAME window following successful login

Question

After inputting login details i would like the target.html page to load in the same window. Currently it loads in a new tab.

<body>
  <div class="loginbox">
    <img src="images/avatar.png" class="avatar">
    <h1>Login</h1>
    <form>
      <p>Username</p>
      <input type="text" name="userid" placeholder="Enter Username">
      <p>Password</p>
      <input type="password" name="pswrd" placeholder="Enter Password">
      <input type="submit" onclick="check(this.form)" value="Login">

    </form>
    <script language="javascript">
      function check(form) {

        if (form.userid.value == "username" && form.pswrd.value == "password") {
          window.open('target.html')
        } else {
          alert("Error Password or Username")
        }
      }
    </script>
  </div>

</body>

i have tried this and it does nothing. but if i change it back to window.open it will load target.html in a new tab. — Kay, Apr 19 '19 at 17:47

ty. · Accepted Answer · 2019-04-19T18:38:35.210

2

Use window.location:

window.location.href = 'target.html';

Because the button is in a form, you must also cancel the default behavior of the event with e.preventDefault(). Here's a full example:

function check(e) {
  e.preventDefault();
  if (e.target.form.userid.value == "username" && e.target.form.pswrd.value == "password") {
    window.location.href = 'target.html';
  } else {
    alert("Error Password or Username")
  }
}

<div class="loginbox">
  <img src="images/avatar.png" class="avatar">
  <h1>Login</h1>
  <form>
    <p>Username</p>
    <input type="text" name="userid" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="pswrd" placeholder="Enter Password">
    <input type="submit" onclick="check(event)" value="Login">

  </form>
</div>

edited Apr 19 '19 at 18:38

answered Apr 19 '19 at 17:43

ty.

10,924
9
52
71

i have tried this and it does nothing. but if i change it back to window.open it will load target.html in a new tab. – Kay Apr 19 '19 at 17:45
Oh, it's because you're submitting as a form. This will cause the page to refresh instead of navigating. Remove `type="submit"` or use `preventDefault` on the form event. – ty. Apr 19 '19 at 17:50
Yes that works!! but if i remove type="submit" i lose the css on the submit button – Kay Apr 19 '19 at 17:57
I added – Kay Apr 19 '19 at 18:22
– Kay Apr 19 '19 at 18:24
@Kay, have a look at the updated example above which uses `e.preventDefault` – ty. Apr 19 '19 at 18:38
Thank you thank you thank you thank you thank you... it worked !!!! – Kay Apr 19 '19 at 18:49

score 0 · Answer 2 · answered Apr 19 '19 at 18:24

0

You can keep the type="submit" and use:

form.addEventListener('submit', function(event) {
    event.preventDefault();

    if (form.userid.value == "username" && form.pswrd.value == "password") {
      window.open('target.html', '_self');
    } else {
      alert("Error Password or Username");
    } 
}, false);

answered Apr 19 '19 at 18:24

RadiatedMonkey

91
3
2

The page only refreshes but does not open target.html – Kay Apr 19 '19 at 18:30
– Kay Apr 19 '19 at 18:31

Open target.html page within SAME window following successful login

2 Answers2