Question

我是JavaScript的新手，我想在转到另一个页面之前比较两个输入字段。目标是，当单击按钮时，将比较两个输入字段中的文本，然后将页面重定向到另一个页面。我尝试过使用window.location.href以及window.location.replace，但到目前为止还没有任何效果。应该执行重定向，因为正在执行同一逻辑块中的警报。谢谢你的帮助。

<html>

    <head>
        <script type="text/javascript">
            function sub(){
                if(document.getElementById("p1").value == document.getElementById("p2").value){
                    alert("success");
                    window.location.replace="http://localhost:8080/newUser.php";
                } else {
                    alert("Password do not match");
                }
            }
        </script>
    </head>

<body>
    <form onSubmit="sub()" method="post">
        Password: <input type="text" id="p1" name="password"><br>
        Confirm Password: <input type="text" id="p2" name="passwordConfirm"><br>
        <input type="submit">
    </form>
</body>

</html>

Answer 1

以下是如何做到这一点。您必须在函数中返回false以防止您的表单被发布;现在你有onsubmit =“return sub（）;”在你的形式。

<html>

    <head>
        <script type="text/javascript">
            function sub(){
                if(document.getElementById("p1").value == document.getElementById("p2").value){
                    alert("success");
                    window.location.href=  "http://localhost:8080/newUser.php";
                } else {
                    alert("Password do not match");
                }
		return false; // IMPORTANT RETURN STATEMENT
            }
        </script>
    </head>

    <body>
        <form onSubmit="return sub();" method="">
          Password: <input type="text" id="p1" name="password"><br>
          Confirm Password: <input type="text" id="p2" name="passwordConfirm"><br>
          <input type="submit">
        </form>
    </body>

</html>

现在，如果你想将输入的参数（密码和密码确认）发布到这个页面，那么@ musicfuel的答案几乎是正确的，你应该只添加onsubmit =“return sub（）;”而不是onsubmit =“sub（）”

Answer 2

您正在提交表单，然后页面重新加载。诀窍是防止这样的默认操作：

<form onSubmit="event.preventDefault(); sub();" method="post">
    Password: <input type="text" id="p1" name="password"><br>
    Confirm Password: <input type="text" id="p2" name="passwordConfirm"><br>
    <input type="submit">
</form>

请注意onSubmit属性的内容：

event.preventDefault();

编辑：

尽管如此，仔细考虑一下。看起来您希望实现某种前端验证，以便在密码不匹配时能够停止表单操作。在这种情况下，我认为更好的想法是禁用按钮，直到密码匹配，或等效的东西。或者只是在密码不匹配的情况下运行event.preventDefault（），并在匹配时继续发布表单。

function sub(e){
  if(document.getElementById("p1").value !== document.getElementById("p2").value){
    e.preventDefault();
    alert("Password do not match");
  }
}

形式如此：

<form onSubmit="sub(event);" method="post" action="foo.php">
    Password: <input type="text" id="p1" name="password"><br>
    Confirm Password: <input type="text" id="p2" name="passwordConfirm"><br>
    <input type="submit">
</form>

Answer 3

@Teddy所说的是对的。使用document.location或document.location.href。你更大的问题是你的表单的onSubmit处理程序在你的调用之后传递并执行POST到你所在的同一页面，可能看起来你无处可去。您的onSubmit似乎是一个验证检查。更传统的方法如下：

<html>

<head>
    <script type="text/javascript">
        function sub() {
            if (document.getElementById("p1").value != document.getElementById("p2").value) {
                return false;
            }
            alert("success");
            return true;
        }
    </script>
</head>

<body>
    <form onSubmit="sub()" method="post" action="http://localhost:8080/newUser.php">
        Password: <input type="text" id="p1" name="password"><br>
        Confirm Password: <input type="text" id="p2" name="passwordConfirm">   <br>
        <input type="submit">
    </form>
</body>

</html>

表单的操作控制每个普通HTML行为成功的实际目标。 onSubmit函数负责在验证失败时返回false，或者在成功时返回true（或者没有任何内容）。返回false会通知文档出现错误并阻止导航。

Answer 4

使用window.location="http://localhost:8080/newUser.php";应该足以重定向。你确定你的路径是正确的吗？即路径中是否还包含其他子目录？ window.location.replace="http://localhost:8080/folder/newUser.php";

Answer 5

最简单的方法是使用window.confirm（）。它就像alert（）但有2个按钮：OK和Cancel。如果用户按下OK则返回true，如果用户按下Cancel则返回false。

babel-polyfill

在Javascript中重定向到新页面的问题

5 个答案: