Using submit type but IF statement does not work

I am trying to make a very simple login page for a website I created and I am having issues with the submit button. I got the submit button to work fine if I use a “button” type in HTML however the Enter key does not work then. I discovered if I use a “submit” type, the Enter button and the mouse click will work however… the button now goes over my IF statement, straight to my Else statement. Any help would be appreciated.

HTML form:

<form>
  <label for="pswd">ENTER PASSWORD</label>
  <br>
  <input class="box" type="password" id="pswd">
  <br>
  <input class="confirm" type="submit" value="SUBMIT" onclick="checkPswd();" />
</form>

JS code:

function checkPswd() {
  var confirmPassword = "08012020";
  var password = document.getElementById("pswd").value;
  if (password == confirmPassword) {
    window.location = "index.html";
  } else {
    alert("Password is incorrect, Please try again.")
  }
}

Again, thank you in advance…

Answer

I have a JSFiddle with a working example of what you are hoping to accomplish here. The key is returning false after calling your function, so the page redirect is not triggered by the input submission:

function checkPswd() {
  let confirmPassword = "08012020";
  let password = document.getElementById("pswd").value;
  
  if (password === confirmPassword) {
    alert("CORRECT!");
  } else{
    alert("Password is incorrect, Please try again.")
  }
}

<form>
  <label for="pswd">ENTER PASSWORD</label>
  <br>
  <input class="box" type="password" id="pswd">
  <br>
  <input class="confirm" type="submit" value="SUBMIT" onclick="checkPswd(); return false;" />
</form>

I would like to add that performing client-side password checking is very insecure since the source code can easily be inspected, so if you are hoping to use this in a real website I would suggest you consider a different approach!