I am learning JavaScript so I decided to make a small project of simple if/else statement login. Everything is fine, but it is not redirecting.
If you know what I am doing wrong please help me in simple language because 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>location.replace(href) if you wishwindow.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>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
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');
Edit: You are also submitting the form, because there is a form method and a submit input specified. This triggers a form post and because no action is specified it will reload the page. Remove the form method and use a button instead.
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');
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">
<title>Login</title>
</head>
<body>
<DIV class="container">
<form 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>
<button type="button" value="Login" id="login-submit" onclick="validate()" value="login">Login</button>
</form>
</DIV>
</body>
</html>