자바 스크립트로 CSS 변경 양식 확인

Question

div가있는 사이트가 있습니다. 누군가가 올바른 암호를 입력하면 div를 사라지게하려고합니다. Javascript로 양식의 유효성을 검사하고 해당 div의 CSS을 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> 

자바 스크립트.

<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">은 양식을 제출하지 않는 일반 버튼을 만듭니다.

누구나 볼 수 있기 때문에 비밀번호를 자바 스크립트에 쓰면 안됩니다!

Answer 2

기본적으로 양식 제출은 페이지를 새로 고침 (또는 지정된 경우 작업 URL로 리디렉션)합니다. 이 기본 동작을 방지하려면 자바 스크립트에 다음을 추가하십시오.

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 
     } 
}