Recently, I completed a HTML page that consists of two separate sections - one for logging in and the other to display after a successful login. In order to ensure proper validation on the login.html page, I implemented the following:
However, when attempting to redirect to the second HTML page (landing.html) upon successful validation of the input fields, I encountered an issue where instead of loading the landing page, the input fields would clear and the data would display in the URL.
I am seeking guidance on how to successfully redirect to the landing.html page located within the same folder after validating the input fields on the login.html page.
function validate(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "username" && password == "user123") {
window.location.href = "landing.html";
} else {
alert("Invalid credentials");
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container">
<div class="box">
<h1>Login</h1>
<form class="form">
<label>Username</label>
<div>
<i class="fa fa-user"></i>
<input type="text" name="username" id="username" placeholder="Enter Username">
</div>
<label>Password</label>
<div>
<i class="fa fa-lock"></i>
<input type="password" name="password" id="password" placeholder="Enter Password">
</div>
<a href="#" class="forgot">Forgot Password?</a>
<input type="submit" value="Login" onclick="validate()">
</form>
</div>
</div>