[英]How to redirect to another HTML page after submitting a form?
我有一个包含表单元素的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中,其值等于所选选项。
有人可以解释发生了什么吗?
欢迎使用Stack Overflow!
请检查
window.location=url
要么
history.pushState({}, "title", url);
代替。
您只缺少一件事。 在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>
因此,我们阻止了表单提交的默认行为,并为其添加了自定义行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.