提交表單后如何重定向到另一個HTML頁面？

Question

我有一個包含表單元素的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中，其值等於所選選項。

有人可以解釋發生了什么嗎？

Answer 1

歡迎使用Stack Overflow！

請檢查

window.location=url

要么

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

代替。

Answer 2

您只缺少一件事。 在submit事件上調用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>

因此，我們阻止了表單提交的默認行為，並為其添加了自定義行為。

提交表單后如何重定向到另一個HTML頁面？

問題描述

2 個解決方案

解決方案1
0 2019-04-21 05:14:14

解決方案2
0 已采納 2019-04-21 05:17:50

提交表單后如何重定向到另一個HTML頁面？

問題描述

2 個解決方案

解決方案1 0 2019-04-21 05:14:14

解決方案2 0 已采納 2019-04-21 05:17:50

解決方案1
0 2019-04-21 05:14:14

解決方案2
0 已采納 2019-04-21 05:17:50