javascript - 使用 Javascript 表单验证更改 CSS

Question

我有一个被 div 覆盖的网站。当有人输入正确的密码时，我想让 div 消失。我使用 Javascript 验证表单并成功将该 div 的 CSS 从 display:block 更改为 display:none，但紧接在显示属性之后已更改，它再次更改回默认值。我想要它，这样如果密码正确，#overlay 的显示将永远设置为无。

表格。

<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

默认情况下，表单提交会重新加载页面(或重定向到操作 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
        }
}