Изменение CSS с подтверждением формы Javascript

Question

У меня есть сайт, на который распространяется div. Я хочу, чтобы div исчез, когда кто-то вводит правильный пароль. Я проверяю форму с помощью Javascript и успешно меняю CSS этого div с display:block на display:none, но сразу после изменения свойства отображения он снова возвращается к умолчанию. Я хочу, чтобы на дисплее #overlay навсегда установлено значение none, если пароль правильный.

Форма.

<form id="overlay-form" name="overlay-form" method="post" onsubmit="validateForm();"> 
<input id="overlay-password" name="overlay-password" type="password"> 
<input type="submit" id="overlay-submit" value="Submit"> 
</form> 

Javascript.

<script> 
    function validateForm() { 
     var x = document.forms["overlay-form"]["overlay-password"].value; 
      if (x == "password") { 
       document.getElementById('overlay').style.display = "none"; 
      } 
    } 
</script> 

Answer 1

Когда вы нажимаете кнопку отправки, страница перезагружается, а div снова виден. Вам нужна кнопка, а не кнопка отправки. <input type="button"> делает обычную кнопку, которая не отправляет форму.

Вы не должны писать пароль на javascript, потому что каждый может это увидеть!

Answer 2

По умолчанию форма submit выполняет перезагрузку страницы (или перенаправляет на URL-адрес действия, если задано). Если вы хотите предотвратить это поведение по умолчанию, добавьте это в свой javascript:

function validateForm(event) { // pass in the event as a parameter, this is the form submit 

    var x = document.forms["overlay-form"]["overlay-password"].value; 
     if (x == "password") { 
      document.getElementById('overlay').style.display = "none"; 
      event.preventDefault(); // prevent the default behaviour here 
     } 
}