Question

我有一个由div覆盖的网站。当有人输入正确的密码时，我想让div消失。我使用Javascript验证表单并成功将该CSS的div从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
        }
}

Answer 2

当您按下提交按钮时，页面会重新加载，并且div会再次显示。你需要一个常规按钮，而不是一个提交按钮。 <input type="button">生成一个没有提交表单的普通按钮。

您不能将密码写入javascript，因为每个人都可以看到它！

使用Javascript表单验证更改CSS

2 个答案: