我正在使用单页应用程序，在填写所有表单字段并提交后，我想使用javascript重定向到新页面。
signup.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>
signup.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");
});
});
ContactInformation.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>
现在正面临以下问题
当我仅填写一个输入字段并按下一步按钮时，它将被重定向到下一页
当我填写所有输入字段并按下一步按钮时，重定向不起作用。
您可以使用注册代码执行类似的操作（更改最后一行）。
$(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>';
});
});
但是您的验证并未做任何阻止下一页加载的操作。另外，是否有理由需要使用onsubmit =？作为SPA，为防止导航到提交URL，您的onsubmit函数应始终调用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");
});