当用户正确填写表单时,您将如何重定向到不同的页面?我尝试了两种不同的方法:
location.href = "otherpage.html";
和location.replace("otherpage.html")
但是它们不起作用。
在前面添加
window.
也不会改变任何东西。
<!DOCTYPE html>
<head>
<script src="javascript/srcipt.js"></script>
</head>
<html>
<form name="form" onsubmit="Distance();" method="POST">
<p>
<label for="dLondon">Distance from London</label>
<input type="number" id="dLondon" name="dLondon" min="0" required>
<label for="dLondon">miles</label>
</p>
<p>
<label for="dCanberra">Distance from Canberra</label>
<input type="number" id="dCanberra" name="dCanberra" min="0" required>
<label for="dCanberra">miles</label>
</p>
<p>
<label for="dOttawa">Distance from Ottawa</label>
<input type="number" id="dOttawa" name="dOttawa" min="0" required>
<label for="dOttawa">miles</label>
</p>
<input type="submit" value="Submit">
</form>
</html>
function Distance() {
let dLondon = document.forms["form"]["dLondon"].value;
let dOttawa = document.forms["form"]["dOttawa"].value;
let dCanberra = document.forms["form"]["dCanberra"].value;
if ((3900 <= dLondon) && ( dLondon <= 5200)) {
if ((5500 <= dCanberra) && (dCanberra <= 6700)) {
if ((6700 <= dOttawa) && (dOttawa <= 9300)) {
location.href = "otherpage.html";
}
else {
alert("Ottawa Distance isn't correct !");
}
}
else {
alert("Canberra distance isn't correct !");
}
}
else {
alert("London Distance isn't correct ! ");
}
}
不要“劫持”提交事件来验证表单输入,而是使用
invalid
事件。您可以使用属性 min
和 max
(等等)来确定该值是否有效。仅当表单有效时才会提交表单,并且您可以使用表单上的标准 action
属性来指定 URL。
document.forms.form.addEventListener('invalid', e => {
e.preventDefault();
alert(`${e.target.title} Distance isn't correct !`);
}, true);
<form name="form" action="otherpage.html" method="POST">
<p>
<label for="dLondon">Distance from London</label>
<input type="number" id="dLondon" name="dLondon"
min="3900" max="5200" title="London" required>
<label for="dLondon">miles</label>
</p>
<p>
<label for="dCanberra">Distance from Canberra</label>
<input type="number" id="dCanberra" name="dCanberra"
min="5500" max="6700" title="Canberra" required>
<label for="dCanberra">miles</label>
</p>
<p>
<label for="dOttawa">Distance from Ottawa</label>
<input type="number" id="dOttawa" name="dOttawa"
min="6700" max="9300" title="Ottawa" required>
<label for="dOttawa">miles</label>
</p>
<input type="submit" value="Submit">
</form>