How can i redirect users after they logged in with if/else statement (javascript)-CodePudding

i am learing javascript so i decided to make a small project of simple if/else statement login everything is fine. But it is not rediricting.

If you know what i am doing wrong plz help me in simpel language coz i am learning it.

'use strict'
function validate(){
    var username=document.getElementById('login-username').value;
    var passowrd=document.getElementById('login-password').value;

    if (username === "daksh" && passowrd === 'daksh'){
        alert('You have sucessfully logged in');
        window.location.href("http://stackoverflow.com");
    } else{
        alert('Wrong username or password');
        return true;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="login.css">
  <title>Login</title>
  <script src="login.js"></script>
</head>

<body>
  <DIV class="container">
    <form method="POST" class="login-form">
      <h1 class="login-heading">LOGIN FORM</h1>
      <input type="text" placeholder="User Name" id="login-username">
      <br><br>
      <input type="password" placeholder="Password" id="login-password">
      <br><br><br>
      <input type="submit" value="Login" id="login-submit" onclick="validate()">
    </form>
  </DIV>

</body>

</html>

CodePudding user response：

window.location.href is not a function. You need to assign the url to window.location.href.

window.location.href = 'http://stackoverflow.com';

However, window.location.href simulates a click. If you want to simulate a HTTP redirect use window.location.replace instead.

window.location.replace('http://stackoverflow.com');

CodePudding user response：

window.location.href is a property, not a method, so your code should be like:

window.location.href = "http://stackoverflow.com";

More info about it on MDN Web Docs

CodePudding user response：

ALWAYS use the submit event handler on a form, NEVER the submit button - you want to block the submission in case of error, or in your case blcok because you are handling the processing yourself
Use eventListener instead of inline event handler
You use location.href as a function, it is not. You could use location.replace(href) if you wish
For obvious security reasons, do not do client side passowrd validation, but I assume it is just for learning purposes

window.addEventListener("load", function() { // when the page has loaded
  document.getElementById("myForm").addEventListener("submit", function(e) { // passing the event
    e.preventDefault(); // you do not want to let the form submit because you handle the nex page 
    const username = document.getElementById('login-username').value;
    const password = document.getElementById('login-password').value;

    if (username === "daksh" && password === 'daksh') {
      alert('You have sucessfully logged in');
      window.location.href = "http://stackoverflow.com";
    } else {
      alert('Wrong username or password');
    }
  })
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="login.css">
  <title>Login</title>
  <script src="login.js"></script>
</head>

<body>
  <div class="container">
    <form method="POST" class="login-form" id="myForm">
      <h1 class="login-heading">LOGIN FORM</h1>
      <input type="text" placeholder="User Name" id="login-username">
      <br><br>
      <input type="password" placeholder="Password" id="login-password">
      <br><br><br>
      <input type="submit" value="Login" id="login-submit">
    </form>
  </div>

</body>

</html>

CodePudding user response：

this is what you should do

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="login.css">
<title>Login</title>
</head>

<body>
 <div class="container">
     <form  method="POST" class="login-form" id="formLogin">
        <h1 class="login-heading">LOGIN FORM</h1>
         <input type="text" placeholder="User Name" id="login-username">
         <br><br>
         <input type="password" placeholder="Password" id="login-password">
         <br><br><br>
         <input type="submit" value="Login" id="login-submit" onclick="validate()">
     </form>
 </div>

</body>
</html>
<script>
'use strict'
function validate(e){
e.preventDefault();
let username=document.getElementById('login-username').value;
let passowrd=document.getElementById('login-password').value;

    if (username === "daksh" && passowrd === 'daksh'){
        alert('You have sucessfully logged in');
        location.href = "http://stackoverflow.com";
    } else{
        alert('Wrong username or password');
        return false;
    }
}
document.getElementById('formLogin').addEventListener('submit', validate);
</script>