HTML form using javascript to validate login credentials?

Question

I have written the below code to make a simple form for validation of form inputs through javascript. Here username and passwords are written in the JS code, but it still shows alert message of the else loop even if giving correct credentials on the form. Please Help?

var user = document.getElementById('username')
var pass = document.getElementById('password')

function user1() {
  if (user == "admin" && pass == "root") {
    window.open("javascript_trial.html")
    alert('correct username')
  } else {
    alert('incorrect username or password')
  }
}

<form>
  <input type="text" name="username" Placeholder="enter username"><br>
  <input type="password" name="password" Placeholder="enter password"><br>
  <button onclick="user1()">Submit</button>
</form>

getElementById you don't have any id's on the elements, you have names — George
– George, Commented Dec 18, 2017 at 14:49
Looking at this code, I hope this is just to learn JavaScript/HTML. — Abbas
– Abbas, Commented Dec 18, 2017 at 16:00

j08691 · Accepted Answer · 2017-12-18 15:36:45Z

1

There are a few errors here:

You need to get the values of your inputs
You want to get those values when the button is clicked. Your code is grabbing them only when the page loads. Move the variable assignment into your function
You didn't give the elements ID attributes

function user1() {
  var user = document.getElementById('username').value
  var pass = document.getElementById('password').value
  if (user == "admin" && pass == "root") {
    window.open("javascript_trial.html")
    alert('correct username')
  } else {
    alert('incorrect username or password')
  }
}

<form>
  <input type="text" name="username" id="username" Placeholder="enter username"><br>
  <input type="password" name="password" id="password" Placeholder="enter password"><br>
  <button onclick="user1()">Submit</button>
</form>

Also note that a button's default type is submit which will submit your form and reload the page after the alert is shown when clicked, so you might want to change that to type="button" to prevent that.

edited Dec 18, 2017 at 15:36

answered Dec 18, 2017 at 14:51

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

George Over a year ago

Your code is grabbing them only when the page loads. Move the variable assignment into your function you don't have to, you can keep the elements as global, when you call .value it will get the current value. It depends on if the OP is planning on using them elsewhere.

Abbas Over a year ago

You want to get those values when the button is clicked. Your code is grabbing them only when the page loads. He is not grabbing any values, not on click, not on page-load. He is just assigning the elements to variables (which also won't work as he didn't assign the ID attribute).

j08691 Over a year ago

@Abbas Essentially we agree. The OP's code won't do anything since he's not getting the values. If the code is in the head, and he did grab the values, he'd get undefined since the elements don't exist yet. If he put the JS at the end of the page or wrapped it in a function to run after the DOM was ready (and got the value) then he'd get whatever value the input had at that time, not after the user changed it.

j08691 Over a year ago

@George If the OP did something like var user = document.getElementById('username').value outside the function then he'd get undefined every time no matter the input. If he did var user = document.getElementById('username') and got the value in the function with user.value then yes, that'd be fine.

Collectives™ on Stack Overflow

HTML form using javascript to validate login credentials?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related