CODEWITHSUNDEEP
javascriptphphtml
Kevin
Kevin

Reputation: 21

html and javascript validate password in text box

Im trying to make a website were people enter a code and they get redirected to a page.

Its important that each code takes the user to a diffrent page for exsample code 123 takes you to index.html and code 000 takes the user to login.html

this is what i have so far but its not working... What am I doing wrong?

index.html:

<form id="form_id" method="post" name="myform">
<br>
<br>
<br>
<label>Code :</label>
<input type="password" name="password" id="password"/>
<input type="button" value="Login" id="submit" onclick="validate()"/>

login.js

function validate(){

var password = document.getElementById("password").value;
 if ( password == "1234" or "0000" or "4444" ){
alert ("Login successfully");
I dont know what to do now or is this script is even correct.

Upvotes: 0

Views: 1144

Answers (4)

user2182349
user2182349

Reputation: 9782

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.

Upvotes: 1

slartibartfast
slartibartfast

Reputation: 163

Perhaps a php solution is what you're after:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if ($_POST['password'] == '000') {
        header('Location: ' . 'login.html');
        exit;
    }
    if ($_POST['password'] == '123') {
        header('Location: ' . 'index.html');
        exit;
    }
}
?>

Upvotes: 0

Kevin P
Kevin P

Reputation: 601

You could use jQuery to accomplish this, just remove onclick="validation()"

login.js

    $(function () {

    $('body').on('click', '#submit', function () {
        var password = $("#password").val();
        if (password == "1234" || password == "0000" || password == "4444") {
            alert("Login successfully");
        }

    })
})

Or

    function validate() {

    var password = document.getElementById("password").value;
    console.log(password);
    if (password == "1234" ||
        password == "0000"  ||
        password == "4444"
    ) {
        alert("Login successfully");
    }
    return false;
}

Check this out on JSFiddle https://jsfiddle.net/61pL5bLf/13/

Upvotes: 0

PotatoManager
PotatoManager

Reputation: 1775

What's actually happening is, the default on click action of a submit button in the form is taking you to the redirect URL i.e. this page itself as you haven't mentioned the action attribute.

To do this you'll have to return false from your validate function when you don't want the user to log in.

Returning false from the on-click function will ensure that the default click action handling is not carried out.

Upvotes: 0

Related Questions