Question

我通常使用Java编写代码，但我知道一点HTML，所以我决定了解更多信息。我的问题是我有一个password field和一个submit按钮。当我按下按钮时，它会检查密码是否正确，然后询问您的姓名是什么。然后，它会将文本字段更改为You got it right, NAME。问题是，当您点击提交时，提交的代码会添加到网址中，因此如果您输入password作为密码，则会在网址上添加?password。这对我很好，但由于URL已更改，页面将重新加载，使文本字段恢复正常。我正在使用Google Chrome。反正有这个，还是因为我正在运行.HTML文件，而不是去网站？

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
    <title>Ryan Club Homepage</title>
    <script>
    function codeEnter(){
    var s = document.getElementById("in").value;
    var correct = "lolliPiper5";
    if(s === correct){
        var name = prompt("What is your name");
        document.getElementById("cde").innerHTML = "You got the password right!, " + name;
    }
    }
</script>
</head>

<body style="font-family:'Myriad Pro' ">

        <form onsubmit="codeEnter();">
            <input type="password" name="code" id="in">
            <br />
            <input type="submit"  value="Ready!">
        </form>
</body>

</html>

谢谢！

Answer 1

您需要使用 JavaScript / jQuery 来阻止表单提交。我正在使用 jQuery 2.1.1 。

对于密码字段，我们现在假设 123 。

e.preventDefault（）方法停止发生元素的默认操作。在此处，它会停止提交按钮，将表单提交到表单的操作属性中指定的网址。

$(document).ready(function(){
    $("#name_container").hide();
    $('#submit').on("click",function(e){
        e.preventDefault();
        $password = $('#password').val();
        if($password == '123'){
            $("#password_container").hide();
            $("#name_container").show();
            $("#result").html("");
        }
        else{
           $("#result").html("Password is incorrect.");
        }
        $name = $("#name").val();
        if($name != '' && $name != null ){
            $("#form").hide();
            $("#result").html("You got it right, "+$name);
        }
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="page.html" method="post" id="form">
    <div id="password_container">
        Password: <input type="password" id="password" />                
    </div>
    <div id="name_container">
        Name: <input type="text" id="name" />
    </div>
    <input type="submit" id="submit">            
</form>
<div id="result">

</div>

（更新）你走了：

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body style="font-family:'Myriad Pro' ">

    <form id="form" method="post" action="#">
        Password:
        <input type="password" name="code" id="in">
        <br />
        <input type="submit" value="Ready!" id="submit">
    </form>
    <div class="ps"></div>
    <script>
        $(document).ready(function () {
            $('#submit').on("click", function (e) {
                e.preventDefault();
                $password = $('#in').val();
                if ($password == 'lolliPiper5') {
                    $name = prompt("Enter your name", "ACCESS GRANTED");
                    $(".ps").html("Welcome to the team, " + $name);
                }
            });
         });
    </script>
</body>

</html>

Answer 2

在您的简化（我希望）代码中，您至少需要设置

<form onsubmit="return codeEnter()">
...
// and in the script
function codeEnter(){
        var s = document.getElementById("in").value;
        var correct = "lolliPiper5";
        if(s === correct){
           var name = prompt("What is your name");
           document.getElementById("cde").innerHTML = "You got the password right!, " + name;
        }
        else return false; //do not submit
}

Answer 3

在现实世界中，如果您确实想要提交密码，则隐藏用户，您可以将表单代码更改为

<form onsubmit="codeEnter();" method="post">

默认情况下，表单通过GET请求将数据提交给服务器，这会导致值显示在url中，因此这通常仅用于进行页码（？page = num）等查询（所有不敏感数据））。

但是，当你设置method =“post”时，表单使用POST请求发送数据，该请求对用户是不可见的，并且在某些情况下在发送之前加密，因此更加安全。

可以找到使用method =“POST”的示例here

.HTML文件在网址

3 个答案: