document.getElementById JS HTML CSS

Question

I am trying to get my forms NOT TO reset. I am making a <input type="password" /> and whenever I click the button to submit the password, and they get it wrong, I need there to be something that shows that it is incorrect. It works, but only for a split second. Can you help me?

 function desktop() { var pass = document.getElementById("pass").value; if (pass == "555") { alert("Welcome;") } else { document.getElementById("wrg").innerHTML = "Incorrect Password"; } } 

 #pass { border-radius: 8px; padding: 5px; margin-bottom: 5px; } #user { margin-bottom: 10px; padding-bottom: 0px; margin-top: 220px; } #wrg { visibility: visible; } 

 <form> <center> <h1 id="user">User</h1> <input type="password" id="pass" placeholder=" Password" /><br> <button onclick="desktop()" id="pass">Sign In</button> <p id="wrg"></p> </center> </form> 

Answer 1

The button ends up submitting the form, which causes the window to refresh because there's no action attribute on the form.

You can prevent this by either making the button type="button" (rather than the default submit ), using event.preventDefault() , or by returning false, as below. (But as noted in comments below, return false may not be the best approach: it's easy to forget to include the return in both the function and the onclick attribute, without which the form will submit anyway. event.preventDefault is the most explicit and therefore probably best way to handle this.)

 function desktop() { var pass = document.getElementById("pass").value; if (pass == "555") { alert("Welcome;") } else { document.getElementById("wrg").innerHTML = "Incorrect Password"; } return false; } 

 #pass { border-radius: 8px; padding: 5px; margin-bottom: 5px; } #user { margin-bottom: 10px; padding-bottom: 0px; /*margin-top: 220px;*/ } 

 <form> <center> <h1 id="user">User</h1> <input type="password" id="pass" placeholder=" Password" /><br> <button onclick="return desktop()">Sign In</button> <p id="wrg"></p> </center> </form> 

(You do have duplicate pass IDs, which should be unique, and of course clientside authentication as done here isn't the least bit secure, but neither of those issues is directly relevant to your question. getElementById winds up returning the first matching element, which happens to be the one you wanted.)

Answer 2

You are using duplicate IDs for your button and input elements: pass .

Also, it would be easier to just add an event listener to the Sign In button and capture that event inside your function.

document.getElementById("pass").addEventListener('click', desktop);

function desktop(evt) {
  evt.preventDefault();
  var pass = document.getElementById("pass").value;
  if (pass == "555") {
    alert("Welcome;");
  } else {
    document.getElementById("wrg").innerHTML = "Incorrect Password";
  }
}

If you do it this way, remember to remove the onclick attribute from the button.

Answer 3

Are you saying that the fields within the form are resetting, or are you saying that the paragraph element with id 'wrg' is not staying?

To keep the form fields from resetting you should be passing all the form values to a PHP file so you can parse the file. If you find out that the password is incorrect, then take the user back to the same form with the same values put back in, along with any other helper elements around the form.

To get the element with id 'wrg' to stay you have to know how an HTML form works. Once a HTML form is sent the page is often reloaded, and since you have not specified an 'action' for the form it is being sent to the same file. I believe you are having this trouble because the form is reloading the page.

On a side note make sure you parse passwords on the backend of the server because users can disable JavaScript and bypass your password verification process.

I may be wrong, but I hope this helps you :)