I am making a website for a school project, and in it, there is a login page. Right now, there is only 1 login username and password. How can I have TWO username and TWO passwords? I have tried the else if, but it didn't work. Any ideas? The code for the login is below. Thanks
function check(form) {
if (form.userid.value == "admin" && form.pwd.value == "noahgrocery") {
return true;
} else {
alert("Incorrect Password or Username")
return false;
}
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Login to Noah Grocery</title>
</head>
<body>
<a href="index.html" class="a">Home</a>
<a href="contactus.html" class="a">Contact Us!</a>
<a href="products.html" class="a">Products</a>
<a href="cart.html">
<img src="https://codehs.com/uploads/d1091610e3a63fb99a6d5608b94a0fa8" width="50px" height="50px" style="float:right; margin-right: 15px">
</a>
<a href="userlogin.html">
<img src="https://codehs.com/uploads/a4a800a1e73c30e0f37382731c3b1234" width="50px" height="50px" style="float:right; margin-right: 15px; background-color: white;">
</a>
<center><img src="https://drive.google.com/uc?export=view&id=1NKWr5CjLNa7tYtO8a49xQ_mcWzMoWGg_" style="width:300px;height:300px;"></center>
<form name="loginForm" method="post" action="admin.html">
<table width="20%" align="center">
<tr>
<td colspan=2>
<center>
<font size=4><b>Login to Noah Grocery</b></font>
</center>
</td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" size=25 name="userid"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="Password" size=25 name="pwd"></td>
</tr>
<tr>
<td><input type="Reset"></td>
<td><input type="submit" onclick="return check(this.form)" value="Login"></td>
</tr>
</table>
</form>
</body>
</html>
disinfor
11.6k2 gold badges38 silver badges49 bronze badges
asked Nov 3, 2022 at 19:09
Random Coder 16
31 gold badge1 silver badge7 bronze badges
2 Answers 2
I assume this is just for fun and you are not doing authorization authentication this way.
but make an array of password objects.
const users =
[
{userid: 'admin', password: 'noahgrocery' },
{userid: 'joe', password: 'secret' }
];
then use find to see if it exists.
const user = users.find(
x => x.userid === form.userid.value &&
x.password === form.password.value);
then just check and see if user exists.
answered Nov 3, 2022 at 19:22
Bryan Dellinger
5,39710 gold badges40 silver badges90 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
There are multiple ways to do this, as you are new and its a school project I just kept it simple.
I wrapped each user/pass in () and added || as or between the two groups and added them on separate lines to make it obvious.
function check(form) {
if (form.userid.value == "admin" && form.pwd.value == "noahgrocery"){
form.action = "#";
return true;
}
else if(form.userid.value == "admin2" && form.pwd.value == "noahgrocery2"){
form.action = "#";
return true;
} else {
alert("Incorrect Password or Username")
return false;
}
}<a href="index.html" class="a">Home</a>
<a href="contactus.html" class="a">Contact Us!</a>
<a href="products.html" class="a">Products</a>
<a href="cart.html">
<img src="https://codehs.com/uploads/d1091610e3a63fb99a6d5608b94a0fa8" width="50px" height="50px" style="float:right; margin-right: 15px">
</a>
<a href="userlogin.html">
<img src="https://codehs.com/uploads/a4a800a1e73c30e0f37382731c3b1234" width="50px" height="50px" style="float:right; margin-right: 15px; background-color: white;">
</a>
<center><img src="https://drive.google.com/uc?export=view&id=1NKWr5CjLNa7tYtO8a49xQ_mcWzMoWGg_" style="width:300px;height:300px;"></center>
<form name="loginForm" method="post" action="admin.html">
<table width="20%" align="center">
<tr>
<td colspan=2>
<center>
<font size=4><b>Login to Noah Grocery</b></font>
</center>
</td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" size=25 name="userid"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="Password" size=25 name="pwd"></td>
</tr>
<tr>
<td><input type="Reset"></td>
<td><input type="submit" onclick="return check(this.form)" value="Login"></td>
</tr>
</table>
</form>
answered Nov 3, 2022 at 19:17
imvain2
16k1 gold badge19 silver badges21 bronze badges
4 Comments
Random Coder 16
Is there a way to have one login page with the 2 usernames and passwords each leading to a separate page? I would like to have one lead to one page, and the other lead to a different page.
imvain2
@RandomCoder16 I updated my answer. Basically just have else ifs. Now there are multiple ways to do this and other ways are far more efficient, but as you are new and this is for school I don't want to use features that you may not have been taught yet.
Random Coder 16
Ok, thanks. Should I just remove the form action at the top of the HTML form code now?
Dhirgham Murran
This is not a secured access code as everyone can see the user and password words in the page when checking the source code in the browser. I think it needs to be encrypted.
lang-js
||(OR). Be careful with operator precedence: it should be(A && B) || (C && D).else ifthat failed?(A && B) || (C && D ). imvain2 just posted an answer using that logic.