HTML Javascript redirecting user with if statement does not work

I want to use user input to decide whether or not the user is redirected to another page. In this case, the user inputs a username and password. If the username and password is correct, then the user is redirected. For this, I use simple javascript and html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1">
        <title>Login</title>
        <!-- the form awesome library is used to add icons to our form -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"> -->
        <!-- include the stylesheet file -->
        <link href="login.css" rel="stylesheet" type="text/css"> 

        <script>
            function testResults (form) {
            var given_username = form.username.value;
            var given_password = form.password.value;

            var correct_username = "123";
            var correct_password = "123";

            if (given_username == correct_username && given_password == correct_password) {
                    window.location.assign("redirected.html");
            }

            else {
                alert("Wrong username and/or password.")
            }
        }
        </script>

    </head>
    <body>
        <div class="login">
            <h1>Login</h1>
            <form action="" method="get">
                <label for="username">
                    <!-- font awesome icon -->
                    <i class="fas fa-user"></i>
                </label>
                <input type="text" name="username" placeholder="Username" id="username" required>
                <label for="password">
                    <i class="fas fa-lock"></i>
                </label>
                <input type="password" name="password" placeholder="Password" id="password" required>
                <input type="submit" value="Login" onclick="testResults(this.form)" />
            </form>
        </div>
    </body>
</html>

However, when I fill in the correct username and password, in this case ‘123’, I don’t get redirected at all. Nothing happens.

But, when I don’t use an if statement at all:

        <script>
            function testResults (form) {
             window.location.assign("redirected.html");
        }
        </script>

it works correctly. That is, whenever you press the submit button, you get redirected. However, in this case the user does not have to fill in credentials at all, so in my case this is not of much use.

I have tried window.location, location.assign, location.href, location.replace and variants, but all yield the same result.

How can I solve or work around this?

Answer

this.form is wrong. also, you might consider using the onsubmit event:

<form action="" method="get" onsubmit="testResults(this); return false">
    <label for="username">
        <!-- font awesome icon -->
        <i class="fas fa-user"></i>
    </label>
    <input type="text" name="username" placeholder="Username" id="username" required>
    <label for="password">
        <i class="fas fa-lock"></i>
    </label>
    <input type="password" name="password" placeholder="Password" id="password" required>
    <input type="submit" value="Login" />
</form>

Advertisement

Answer