I have been running the code of replit.com, and would be very grateful for any help.
window.location.href = "veiw.html" is the main thing that isn't working, instead of bringing the user to the second html page, the page just reloads. So if there's any other way of bring the user to the other page or any other ways of solving the problem, I am willing to try anything.
//Login; verifaction//
function verifaction() {
var user = document.getElementById("uname").value;
var pass = document.getElementById("psw").value;
var setn = "Example"
var setp = "13"
var y = document.getElementById('show');
if(user === setn) {
if(pass === setp) {
window.location.href = "veiw.html"
}
else{alert("Incorrect Password")}}
else{alert("Incorrect Username")}
};#login {
display: block;
padding-left: auto;
padding-right: auto;
padding-top: auto;
padding-bottom: auto;
font-family: 'Economica';
font-size: 20px;
text-align: center;
}<html>
<body>
<script src="script.js"></script>
<br><br><br><br><br>
<div clss="login">
<form>
<label for="uname"><b>Username:</b></label>
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<br><br>
<label for="psw"><b>Password:</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<br><br>
<button type="submit" id="log" onclick="verifaction()">Login</button>
<label id="re">
<br><br>
<input type="checkbox" name="remember">Remember me
</label>
</form>
</div>
</body>
</html>The submit makes the button "Submit" the form, and as you didn't specify any URL in the <form> tag, it'll send a GET request with form data to the same URL.
What you want to do is to disable the browser's default behavior and execute the rest of your "onClick" function:
So on the HTML pass the event
<button type="submit" id="log" onclick="verifaction(event)">Login</button>
And then, you disable it:
function verifaction(event) {
event.preventDefault()
...
}
Or, you could also listen to the save event that your form will receive when clicking on the save button:
<form onsubmit="verifaction(event)">
<button type="submit" id="log">Login</button>
</form>
Full example:
//Login; verifaction//
function verifaction(event) {
event.preventDefault()
var user = document.getElementById("uname").value;
var pass = document.getElementById("psw").value;
var setn = "Example"
var setp = "13"
var y = document.getElementById('show');
if (user === setn) {
if (pass === setp) {
window.location.href = "veiw.html"
} else {
alert("Incorrect Password")
}
} else {
alert("Incorrect Username")
}
};#login {
display: block;
padding-left: auto;
padding-right: auto;
padding-top: auto;
padding-bottom: auto;
font-family: 'Economica';
font-size: 20px;
text-align: center;
}<html>
<body>
<script src="script.js"></script>
<br><br><br><br><br>
<div clss="login">
<form>
<label for="uname"><b>Username:</b></label>
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<br><br>
<label for="psw"><b>Password:</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<br><br>
<button type="submit" id="log" onclick="verifaction(event)">Login</button>
<label id="re">
<br><br>
<input type="checkbox" name="remember">Remember me
</label>
</form>
</div>
</body>
</html>Read more:
I believe that you are doing this as a learning exercise; In real projects, you should avoid validating data on the client-side (HTML+JS) that you send to your users.
Your main issue is that the form submits and the page refreshes, because you didn't used Event.prefentDefault(). Therefore:
on* attributes on HTML elements. JS should be in one place only and that's its respective tag or file<script> tags around your HTML in a render-blocking manner. Scripts (without the defer attribute) should go right before the closing </body> tag."submit" event.login(evt) and use the Event as argumentveiw.htmlview.htmlExample:
<!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 clss="login">
<form id="form-login">
<label for="uname"><b>Username:</b></label>
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<br><br>
<label for="psw"><b>Password:</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<br><br>
<button type="submit">Login</button>
<label><input type="checkbox" name="remember">Remember me</label>
</form>
</div>
<!-- <script> or <script src="script.js"> -->
<script>
// DOM helpers:
const EL = (sel, par) => (par || document).querySelector(sel);
// Hardcoded password and username
// so that anyone can hack the app:
const setn = "Example";
const setp = "13";
// Task:
// Login form handler
const EL_form = EL("#form-login");
const EL_uname = EL("#uname");
const EL_passw = EL("#psw");
const login = (evt) => {
evt.preventDefault(); // Prevent default browser action submit
const user = EL_uname.value;
const pass = EL_passw.value;
const errors = [];
if (user !== setn) errors.push("Incorrect Username");
if (pass !== setp) errors.push("Incorrect Password");
if (errors.length) return alert(errors.join("\n"));
// If the function didn't return (exited) till now, we're fine!
// Navigate to page:
window.location.href = "view.html"
};
EL_form.addEventListener("submit", login);
</script>
</body>
</html>The page is reloading because you are submitting the form and since it doesn't have action attribute set it defaults to current page. Once the form submits page refreshes and your JS doesn't run.
What you want to do is add event listener to the form for submit event, prevent the default browser behaviour and then perform your logic in JS.
Like so:
// wait for DOMContentLoaded so you can find the form in DOM
window.addEventListener("DOMContentLoaded", (event) => {
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault(); // prevent default browser behaviour (submitting the form)
verifaction(); // run whatever your logic is in this function
});
});
Also best to remove the click listener from the button, having a submit listener on the <form> is a better practice since it will fire no mattere how the form was submitted, not just by clicking.