提交表单后如何重定向到另一个 HTML 页面？答案

【问题标题】：How to redirect to another HTML page after submitting a form?提交表单后如何重定向到另一个 HTML 页面？
【发布时间】：2019-04-21 05:05:59
【问题描述】：

我有一个包含表单元素的 HTML 页面。表单包含单选类型的输入和末尾的按钮。我希望在单击按钮时调用一个 javascript 方法，该方法获取所选选项的值并重定向到 selectedChoice.html 页面。

这是我的 HTML 页面。

<html>
    <head>
        <script type="application/javascript" src="../js/navigation.js"></script>

    </head>
    <body>
        <div id="chooseBodyPart">
            <form>
                <div class="question-text">
                    <p>Which body part is at dis-ease??</p>
                </div>
                <input class="radio-option" type="radio" name="bodyPartAtDisease" value="chest"> Chest <br>
                <input class="radio-option" type="radio" name="bodyPartAtDisease" value="head"> Head <br>
                <input class="radio-option" type="radio" name="bodyPartAtDisease" value="shoulders"> Shoulders <br>
                <input class="radio-option" type="radio" name="bodyPartAtDisease" value="eyes"> Eyes <br>
                <input class="radio-option" type="radio" name="bodyPartAtDisease" value="ears"> Ears <br>
                <input class="radio-option" type="radio" name="bodyPartAtDisease" value="heart"> Heart <br>
                <button onclick="redirectToNextPageBasedOnResponse();">Proceed</button>
            </form>



        </div>
    </body>
</html>

下面是我的js。

function getListOfChoices(form) {
    var choices = form.getElementsByTagName("input");
    return choices;
}


// list of choices should be passed to this method and name of checked choice should be returned.
// In case no choice is selected the return null
function getNameOfCheckedChoice(choices) {
    var selectedChoice = null;
    for (var choiceNumber = 0; choiceNumber < choices.length; choiceNumber++) {
        if (choices[choiceNumber].checked) {
            selectedChoice = choices[choiceNumber].value;
            break;
        }
    }
    return selectedChoice;
}


function redirectToNextPageBasedOnResponse() {
    var divContainingForm = document.getElementById("chooseBodyPart");
    var form = divContainingForm.getElementsByTagName("form")[0];
    var choices = getListOfChoices(form);
    var selectedChoice = getNameOfCheckedChoice(choices);

    window.location.href = "http://" + window.location.host + "/html/" + selectedChoice + ".html";
}

代码的工作正是我想要的，但是一旦控制从 redirectToNextPageBasedOnResponse() 返回，URL 不会更改为我编码的内容，而是在现有 URL 中插入一个查询参数，其值等于所选选项。

谁能解释一下发生了什么？

【问题讨论】：

标签： javascript html

【解决方案1】：

你只缺少一件事。在提交事件上调用preventDefault()。

您需要通过onclick="redirectToNextPageBasedOnResponse(event);" 接收事件，然后在您的处理程序中执行event.preventDefault()。

function getListOfChoices(form) {
  var choices = form.getElementsByTagName("input");
  return choices;
}


// list of choices should be passed to this method and name of checked choice should be returned.
// In case no choice is selected the return null
function getNameOfCheckedChoice(choices) {
  var selectedChoice = null;
  for (var choiceNumber = 0; choiceNumber < choices.length; choiceNumber++) {
    if (choices[choiceNumber].checked) {
      selectedChoice = choices[choiceNumber].value;
      break;
    }
  }
  return selectedChoice;
}


function redirectToNextPageBasedOnResponse(event) {
  event.preventDefault();
  var divContainingForm = document.getElementById("chooseBodyPart");
  var form = divContainingForm.getElementsByTagName("form")[0];
  var choices = getListOfChoices(form);
  var selectedChoice = getNameOfCheckedChoice(choices);

  window.location.href = "http://" + window.location.host + "/html/" + selectedChoice + ".html";
}

<div id="chooseBodyPart">
  <form>
    <div class="question-text">
      <p>Which body part is at dis-ease??</p>
    </div>
    <input class="radio-option" type="radio" name="bodyPartAtDisease" value="chest"> Chest <br>
    <input class="radio-option" type="radio" name="bodyPartAtDisease" value="head"> Head <br>
    <input class="radio-option" type="radio" name="bodyPartAtDisease" value="shoulders"> Shoulders <br>
    <input class="radio-option" type="radio" name="bodyPartAtDisease" value="eyes"> Eyes <br>
    <input class="radio-option" type="radio" name="bodyPartAtDisease" value="ears"> Ears <br>
    <input class="radio-option" type="radio" name="bodyPartAtDisease" value="heart"> Heart <br>
    <button onclick="redirectToNextPageBasedOnResponse(event);">Proceed</button>
  </form>
</div>

因此，我们阻止了表单提交的默认行为，并为其添加了我们自己的自定义行为。

【讨论】：

谢谢。有效。我从昨天开始就卡住了。 IDE 还显示该事件已被弃用。这有什么？？
它没有被弃用，AFAIK。显示的弃用消息是什么？
Deprecated symbol used. Consult docs for better understanding.
我不确定。这是在内联事件处理程序中访问事件的常用方法。也许您的 IDE 希望您使用 addEventListener 或者某些扩展名错误地识别了某些内容。

【解决方案2】：

欢迎来到 Stack Overflow！

请检查

window.location=url

或

history.pushState({}, "title", url);

改为。

【讨论】：