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

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

javascript html

Javascript 提交表单后如何重定向到另一个HTML页面？,javascript,html,Javascript,Html,我有一个包含表单元素的HTML页面。表单包含单选输入和末尾的按钮。我希望在单击按钮时，调用一个javascript方法，该方法获取selected choice的值并重定向到selectedChoice.html页面这是我的HTML页面 <html> <head> <script type="application/javascript" src="../js/navigation.js"></script> &

我有一个包含表单元素的HTML页面。表单包含单选输入和末尾的按钮。我希望在单击按钮时，调用一个javascript方法，该方法获取selected choice的值并重定向到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";
}

函数getListOfChoices（表单）{
var choices=form.getElementsByTagName（“输入”）；
返回选择；
}
//应将选项列表传递给此方法，并应返回选中选项的名称。
//如果未选择任何选项，则返回null
函数getNameOfCheckedChoice（选项）{
var selectedChoice=null；
对于（var choiceNumber=0；choiceNumber


代码的工作方式完全符合我的要求，但一旦控件从redirectToNextPageBasedOnResponse（）返回，URL不会更改为我编码的内容，而是在现有URL中插入一个查询参数，其值等于selected choice
有人能解释一下发生了什么吗？？？
欢迎来到Stack Overflow
请查收
window.location=url

或
相反。
欢迎使用堆栈溢出
请查收
window.location=url

或
相反。
你只遗漏了一件事。调用提交事件
您需要通过onclick=“redirectToNextPageBasedOnResponse（event）；”
获取事件，然后在处理程序中执行event.preventDefault（）

函数getListOfChoices（表单）{
var choices=form.getElementsByTagName（“输入”）；
返回选择；
}
//应将选项列表传递给此方法，并应返回选中选项的名称。
//如果未选择任何选项，则返回null
函数getNameOfCheckedChoice（选项）{
var selectedChoice=null；
对于（var choiceNumber=0；choiceNumber


身体哪个部位不舒服
胸部

头部

肩膀

眼睛

耳朵

心脏

继续
您只缺少一件事。调用提交事件
您需要通过onclick=“redirectToNextPageBasedOnResponse（event）；”
获取事件，然后在处理程序中执行event.preventDefault（）

函数getListOfChoices（表单）{
var choices=form.getElementsByTagName（“输入”）；
返回选择；
}
//应将选项列表传递给此方法，并应返回选中选项的名称。
//如果未选择任何选项，则返回null
函数getNameOfCheckedChoice（选项）{
var selectedChoice=null；
对于（var choiceNumber=0；choiceNumber


身体哪个部位不舒服
胸部

头部

肩膀

眼睛

耳朵

心脏

继续
谢谢。成功了。我从昨天起就被卡住了。IDE还显示该事件已被弃用。这上面有什么吗？没什么不推荐的。显示的弃用消息是什么？使用了弃用符号。查阅文档以更好地理解。
我不确定。这是在内联事件处理程序中访问事件的常用方法。可能您的IDE希望您使用addEventListener
，或者某个扩展错误地标识了某些内容。谢谢。成功了。我从昨天起就被卡住了。IDE还显示该事件已被弃用。这上面有什么吗？没什么不推荐的。显示的弃用消息是什么？使用了弃用符号。查阅文档以更好地理解。
我不确定。这是在内联事件处理程序中访问事件的常用方法。可能您的IDE希望您使用addEventListener
，或者有某个扩展错误地标识了某些内容。