0

I'm trying to create a JS account system with HTML forms, but my script either won't run, or doesn't work. I've looked through the code many times and make changes, but nothing ever works. Can someone help me? Also, this system has one public password, but I could change it to be passwords for everyone. This isn't published, it is just a file that I have, and it would be on two different files, but for this I put them on the same HTML file.

<form name="login" onsubmit="login()">
            <fieldset style="width:300px">
                <legend>Login</legend>
                <label for="username">Username:</label>
                <br>
                <input type="text"
                name="username"
                required>
                <br><br>
                <label for="password">Password:</label>
                <br>
                <input type="text"
                name="password"
                required>
                <br><br>
                <input type="submit"
                name="submit">
            </fieldset>
        </form>
        <script>
            function login() {
                let usernameinput = document.forms["login"]["username"].value;
                let passwordinput = document.fomrs["login"]["password"].value;
                var users = ["user123", "otheruser123"];
                if (usernameinput == users) {
                    if (passwordinput == "password123") {
                        alert("Logged in");
                        window.location.replace("home.html");
                    } else {
                        alert("Incorrect username and/or password");
                    }
                } else {
                    alert("Incorrect username and/or password");
                }
            }
        </script>

I've tried changing it so that instead of two if functions, there is just one with both inputs and an and operator like this:

if (usernameinput == users && passwordinput == "password123") {
    alert("Logged in");
    window.location.replace("home.html");
} else {
    alert("Incorrect username and/or password");
}

I have also tried just putting in usernames instead of the users variable like this:

if (usernameinput == "user123" || usernameinput == "otheruser123" && passwordinput == 
"password123") {
    alert("Logged in");
    window.location.replace("home.html");
}

The last thing I tried was instead of the usernameinput and passwordinput variables, I tried using document.login.username.value or document.login.password.value like this:

if (document.login.username.value == "user123" && document.login.password.value == 
"password123") {
    alert("Logged in");
    window.location.replace("home.html");
}

With this, I also tried it with two if functions. I have no idea why none of this is working.

Thomas Robert
  • 11
  • 1
  • You need to use `event.preventDefault()`. Otherwise, the form will be submitted and the page reloads. – Barmar Apr 05 '22 at 19:16
  • 1
    `var users = ["user123", "otheruser123"]; if (usernameinput == users) ...` the input won't be equal to the array. You need do check if the users array _contains_ the value given as input. See [`Array.includes` docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) . Also, when doing `&&`and `||` operations, make sure to "read aloud", and add parenthesis to make sure the evaluation is done on following the order you expect. – Pac0 Apr 05 '22 at 19:19
  • @deceze why did you close that one? the desired behavior seems quite clear to me + OP has submitted attemps. – Pac0 Apr 05 '22 at 19:21
  • Use `users.includes(usernameinput)` – Barmar Apr 05 '22 at 19:22
  • 1
    I hope this is just a toy. exercise You can't do real authentiction in the client, because the user can simply open Developer Tools to see the usernames and passwords. – Barmar Apr 05 '22 at 19:23
  • See also http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms – Heretic Monkey Apr 05 '22 at 19:30
  • @Barmar The JavaScript would be in a separate file (I just put it in the HTML just to show it), unless people can see JavaScript files, the usernames and passwords should be safe. – Thomas Robert Apr 05 '22 at 21:00
  • Of course they can. Just go to the Sources tab of DevTools and you'll see all the JavaScript files that are loaded into the browser.' – Barmar Apr 05 '22 at 21:02
  • @Barmar Can they see JSON files? I didn't know they can see JS files. As for the code, thanks for the help though I don't really understand how the event.preventDefault would help, wouldn't that just stop the submit button from working? (Sorry, I'm new-ish to JS coding). – Thomas Robert Apr 05 '22 at 23:31
  • It stops the submit button from submitting the form to the server after `login()` returns. – Barmar Apr 05 '22 at 23:58

0 Answers0