表单提交后重定向到不同页面

问题描述 投票:0回答:1

当用户正确填写表单时,您将如何重定向到不同的页面?我尝试了两种不同的方法:

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 ! ");
}
}
javascript html forms
1个回答
0
投票

不要“劫持”提交事件来验证表单输入,而是使用

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>

© www.soinside.com 2019 - 2024. All rights reserved.