I've been trying to make a simple javascript log in page that redirects me to a different file if the username and password match.
For simplicity, I made the correct username = "a" and correct corresponding password="b".
<form>
<input class="user-pass" name="username" type="text" id="username" placeholder="Username">
<br>
<br>
<input class="user-pass" name="password" type="password" id="password" placeholder="Password">
<br>
<br>
<button class="user-pass" type="submit" id="login" style="background-color: rgb(81, 122, 199); color: white; font-weight: bold;" onsubmit="login()">Log In</button>
</form>
<script>
function login(){
const username = document.getElementById("username")
const password = document.getElementById("password")
const message = document.getElementById("hidden")
if (username.value === "a" && password.value === "b"){
window.location.href="google.com";
}
};
</script>
Can someone tell me what I'm doing wrong? I'm new to this so any help would be appreciated!
You should study about forms,we use them to collect data and send it to a server.
Your form has no action method,and does'nt know what to do with the data inside it,so it returns you back to the original page.
You could achieve the functionality you want just by removing the form tags and calling your function from an onclick event instead of onsubmit
<input class="user-pass" name="username" type="text" id="username" placeholder="Username">
<br>
<br>
<input class="user-pass" name="password" type="password" id="password" placeholder="Password">
<br>
<br>
<button class="user-pass" id="login" style="background-color: rgb(81, 122, 199); color: white; font-weight: bold;" onclick="login()">Log In</button>
<script>
function login(){
const username = document.getElementById("username")
const password = document.getElementById("password")
const message = document.getElementById("hidden")
if (username.value === "a" && password.value === "b"){
window.location.href="https://www.google.com";
}
console.log(username.value)
};
</script>