This is fairly simple, I'm trying to make the login button work, and redirect to a different file (placeholder.html) if what is in the email and password match the following:
Login: Admin Password: Password123
I have yet to get the login button to work in the first place to redirect, and id like to keep it as a button element by using, the 'onlick=' with a function in js or an id for now.
Thank you so much for the help :) Apologies if this is a little sloppy, one of my first times asking for help here haha
Here is what I had so far, which dent work fully:
<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
<link href="style." rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<body>
<div class="login-page">
<div name="login" class="form">
<div class="title login" style="font-size: 25px; font-family: Roboto; padding-bottom: 25px;">
Login Form
</div>
<form class="login-form" action="login.php" method="post">
<input type="email_" placeholder="email"/>
<input type="password" placeholder="password"/>
<button id="login_button">login</button>
<p class="message" style="font-family: Roboto, sans-serif;">Not registered?
<a href="register.html">Create an account</a>
</p>
</form>
</div>
</div>
</body>
<script type="text/javascript">
document.getElementById("login_button").onclick = function () {
location.href = "#placeholder";
};
</script>
</html>
Welcome to StackOverflow, there are a few things that I wanted to cover here as part of the answer.
The function is running onClick, the way you're using location.href is invalid though. You are redirecting to an anchor (it starts with a #), The way this is implemented in browsers is that it will redirect your scroll positioning to the top of the element with ID, if you had an element on your page with the ID of placeholder (and the page height was more than 100%) it would move the scroll position of the page, not redirect.
I believe you're looking for
location.href = "placeholder.html";
You wanted the user to be redirected based on the username and password that they enter, I will provide the solution below but before that, I wanted to say that this isn't secure, the username and password are visible inside the source code and if you planned to use this to hide important information it will not work because the code is visible to anyone who accesses the webpage, you should be using a server-side language such as NodeJS or PHP to hide that information, I assume that this is just for practise/learning though.
The first thing you'll want to do is get the username and password.
Your <input type="email_" placeholder="email"/> should be <input type="text" placeholder="email"/>. For some reason you put the type as what looks to be a typo email_ and not email but since you said the username was admin that is just text.
I would start by giving an ID to both the username and password elements.
<input type="email" id="username" placeholder="email"/>
<input type="password" id="password" placeholder="password"/>
Then inside your function you can change it to check and redirect like below
document.getElementById("login_button").onclick = function () {
const username = document.getElementById("username").value
const password = document.getElementById("password").value
if (username === 'Admin' && password === 'Password123') {
location.href = "placeholder.html";
}
};
That will also be case-sensitive.
There are a couple of ways that you could do this, here is a simple example:
<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
<link href="style." rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<body>
<div class="login-page">
<div name="login" class="form">
<div class="title login" style="font-size: 25px; font-family: Roboto; padding-bottom: 25px;">
Login Form
</div>
<form class="login-form" action="login.php" method="post">
<input type="email_" placeholder="email"/>
<input type="password" placeholder="password"/>
<button id="login_button" onclick="login()">login</button>
<p class="message" style="font-family: Roboto, sans-serif;">Not registered?
<a href="register.html">Create an account</a>
</p>
</form>
</div>
</div>
</body>
<script type="text/javascript">
function login() {
// Login logic here
if (loginSuccesful) {
window.location.href = "/placeholder.html";
}
}
</script>
</html>