填写所有表单字段后如何从 javaScript 重定向到页面

Question

我正在使用单页应用程序，并且在填写所有表单字段并提交后，我想使用 javascript 重定向到新页面。

注册.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function validatation() {
            debugger
            if ($("#txtfname").val() == "") {
                debugger
                alert("Provide a first name");
                $("#txtfname").focus();
                return false;
            }
            if ($("#txtmname").val() == "") {
                debugger
                alert("Provide a middle name");
                $("#txtmname").focus();
                return false;
            }
            if ($("#txtlname").val() == "") {
                debugger
                alert("Provide a last name");
                $("#txtlname").focus();
                return false;
            }
            return true;
        }
    </script>
    <script src="signup.js"></script>
</head>
<body>
    <form id="txtPersonalInformation" onsubmit="return validatation()">
        <h1>Personal Information</h1>

        <label for="txtfname">First Name:</label>
        <input id="txtfname" name="txtfname" type="text" /><br />

        <label for="txtmname">Middle Name:</label>
        <input id="txtmname" name="txtmname" type="text" /><br />

        <label for="txtlname">Last Name:</label>
        <input id="txtlname" name="txtlname" type="text" /><br />

        <input id="btnnext" type="submit" value="Next" />
    </form>
</body>
</html>

注册.js

$(document).ready(function () {
    $('#btnnext').click(function (event) {
        sessionStorage.clear();
        sessionStorage.setItem("firstName", $("#txtfname").val());
        sessionStorage.setItem("lastName", $("#txtlname").val());
        sessionStorage.setItem("middleName", $("#txtmname").val());
        $("#txtPersonalInformation").load("ContactInformation.html");
    });
});

联系信息.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
     <script src="ContactInformation.js"></script>
</head>
<body>
    <form id="txtContactInformation">
        <h1>Contact Information</h1>

        <label for="txtemailid">EmailAddress:</label>
        <input id="txtemailid" name="txtemailid" type="text" /><br />

        <label for="txtpass">Password:</label>
        <input id="txtpass" name="txtpass" type="password" /><br />

        <label for="txtcontactno">Contact No:</label>
        <input id="txtcontactno" name="txtcontactno" type="number" /><br />

        <input id="btnsubmit" type="submit" value="Submit" />

    </form>
</body>
</html>

现在面临以下问题

当我只填写一个输入字段并按下下一步按钮时，它被重定向到下一页

当我填写所有输入字段并按下下一步按钮时，重定向不起作用。

Answer 1

你可以用你的注册码做这样的事情（改变最后一行）。

$(document).ready(function () {
    $('#btnnext').click(function (event) {
        sessionStorage.clear();
        sessionStorage.setItem("firstName", $("#txtfname").val());
        sessionStorage.setItem("lastName", $("#txtlname").val());
        sessionStorage.setItem("middleName", $("#txtmname").val());
        document.body.innerHTML='<object type="text/html" data="ContactInformation.html" ></object>';
    });
});

Answer 2

但是您的验证没有做任何事情来阻止下一页加载。 另外，是否有理由需要使用 onsubmit=？ 作为 SPA，为了防止导航到提交 URL，您的 onsubmit function 应始终调用 event.preventDefault()（或返回 false）以防止表单的默认“提交”行为。

$('#btnnext').submit(function (event) {
    event.preventDefault();
    if( !validatation() ) return;
    sessionStorage.clear();
    sessionStorage.setItem("firstName", $("#txtfname").val());
    sessionStorage.setItem("lastName", $("#txtlname").val());
    sessionStorage.setItem("middleName", $("#txtmname").val());
    $("#txtPersonalInformation").load("ContactInformation.html");
});

填写所有表单字段后如何从 javaScript 重定向到页面

问题描述

2 个解决方案

解决方案1
0 2020-05-15 13:07:16

解决方案2
0 已采纳 2020-05-15 13:47:00

填写所有表单字段后如何从 javaScript 重定向到页面

问题描述

2 个解决方案

解决方案1 0 2020-05-15 13:07:16

解决方案2 0 已采纳 2020-05-15 13:47:00

解决方案1
0 2020-05-15 13:07:16

解决方案2
0 已采纳 2020-05-15 13:47:00