This will do it
document.getElementById("login").addEventListener("click",function(evt){
var codeEntered = document.getElementById("password").value.trim();
// For each different code, use location.href to redirect the user
switch (codeEntered) {
case "000":
location.href = "index.html";
break;
case "123":
location.href = "login.html";
break;
default:
alert("Bad code");
}
});
<form id="form_id" method="post" name="myform">
<label>Code :</label>
<input type="password" name="password" id="password">
<button type="button" id="login">Login</button>
</form>
Some notes:
- This doesn't really require a form because the button click event handler will initiate the next action
- Don't use inputs for buttons, it is not semantically correct
- Don't use slashes on tags that don't have a closing tag
- Avoid the onclick attribute, it is better to use JavaScript to attach events to elements
- Anyone can read the JavaScript and bypass it to go to the page they want to, without entering the code
If you would like to use PHP to handle the code, you should change your HTML like so:
<form method="post" action="auth.php">
<label>Code :</label>
<input type="password" name="password">
<button type="submit">Login</button>
</form>
You should remove all the JavaScript related to the login codes if you are going to use PHP. Also notice that all the id attributes were removed from the HTML because you don't need them if you aren't using JavaScript on those elements. The ids aren't sent to the server, only the names are. The button type changed to submit as well.
In auth.php, the code would be:
<?php
$code = $_POST['code'];
// For each different code, use header("Location: ...") to redirect the user
switch ($code) {
case "000":
header("Location: index.html");
break;
case "123":
header("Location: login.html");
break;
default:
echo "Bad code";
}
Using PHP protects the codes, people cannot easily access the PHP code.
If you are creating a login system, you will need to remember who has logged in so you can restrict access to pages. The most common approach is to use a session variable.
To add code which sets a session variable to auth.php ...
<?php
session_start();
$code = trim($_POST['code']);
// For each different code, use header("Location: ...") to redirect the user
switch ($code) {
case "000":
$_SESSION['code'] = $code;
header("Location: index.php");
break;
case "123":
$_SESSION['code'] = $code;
header("Location: login.php");
break;
default:
echo "Bad code";
}
In index.php and login.php, you would reference the session variable like so:
<?php
session_start();
if ($_SESSION['code'] === '000') {
// Do stuff
} else {
// Force the user to login again
}
Be sure to use the .php extension to have PHP run the file.
Choose the file names carefully. index.php is usually the first page a site visitor encounters. If authentication is required, the page is often named login.php. For your code, index.php would probably provide a link to login.php and then it could run differently after the user has logged in. In the code in this answer, auth.php is determining whether the code is acceptable, then routing the user to the proper page.