Ad

JavaScript Simple Login From An Array

- 1 answer

I have very little experience with JavaScript and can't figure out how to get this to work, it may be a very small fix or it may be something major I have absolutely no clue...

I am trying to just create a really simple login for my assignment, security is not an issue as it is not required in the brief. The event of the user clicking the submit button should either grant or deny the user entry into the site. I have commented throughout the code so hopefully this will be a quick job to spot whatever is going wrong.

It possibly may be the "&" i included in the IF statement, I wasn't entirely sure if it would work in JavaScript or not. Or it may possibly be the calling of the users input, as I am not sure if I did that right either; i.e pass = password (from the form)

JavaScript:

    <script>
    function loadpage() {
    var user = username; //assigns user input to variable
    var pass = password; //^^
    var storedus = ["Jordan", "Marzia", "Ryan"]; //array of acceptable usernames
    var storedps = ["123", "cat", "seven"]; //array of acceptable passwords

    if (user = storedus & pass = storedps) //condition must include both an acceptable username and password to >>
    {
        window.location.href = "home.html"; // >> proceed to next the portal page(home.html)
    }
    else 
    {
        window.alert("An invalid username or password was entered."); //if the users input was not acceptable then display a popup informing them so.
    }
}

</script>

HTML table and form:

        <table style="position: absolute; left: 35%; top: 20%;"> <!- table to layout the form to take the users username and password to allow them to 
        gain entry into the site-!>
        <form>
        <tr><td><h2>Sign in</h2></td></tr>
        <tr><td>Username*: </td><td><input type="username*" name="username" required></td></tr>
        <tr><td>Password*: </td><td><input type="password*" name="password" required></td></tr>
        <tr><td><input type="submit" name="signin" onclick="loadpage()"</td></tr>
        </form>
    </table>

Thank you in advance for your help!

Ad

Answer

You are trying to compare an array with what I'd guess to be a string. Instead, you should loop through the array and compare the values with the username and password.

var usernames = [
  'Script47',
  'SomeUsernname'
];

var passwords = [
  'somePassword',
  'password'
];

var username = 'Script47';

var password = 'somePassword'

for (var i = 0; i < usernames.length; i++) {
  if (username == usernames[i] && password == passwords[i]) {
    alert('Successful!');
    break;
  } else {
    alert('Failed!')
  }
}

Notice how I am using &&.

Example

JSFiddle

Ad
source: stackoverflow.com
Ad