使用html中的提交按钮重定向到基于单选按钮的网页

Question

我的网页使用带有单选按钮的form从用户那里获取输入。 用户完成所有单选按钮的表单并单击提交按钮后，它需要根据所选的单选按钮重定向到网页

我在表单中有多个字段集，但我只想使用特定的单选按钮进行重定向。 所以我在输入中引用"ID"。

我尝试了表单中的提交和操作，两者似乎都没有帮助。

<form onSubmit="javascript:redirect();" method="post"><form action="javascript:redirect();">

如果我使用操作，它只是重定向到所有单选按钮输入的第一个 html 页面，而 onSubmit 根本不重定向

还尝试了多种功能，但还没有运气

<script type="text/javascript">
function redirect() {
var textValue = document.getElementById("answer").value;
if(textValue == "Compassionate")
{
location.href = "../Results/results_empathy.html";
}
else if(textValue == "Meticulous")
{
location.href = "../Results/results_analytical.html";
}
else if(textValue == "Conscientious")
{
location.href = "../Results/results_diplomatic.html";
}
else
{
location.href = "../Results/results_creative.html";
}
}
</script>
<form action="javascript:redirect();">
<fieldset class="ntset">
<legend>About Yourself</legend>
<h4>Your Character in One Word</h4>
<input type="radio" id="answer" name="habits2" value="Compassionate"><label class="fmt" for="habits2"> Compassionate</label>
<input type="radio" id="answer" name="habits2" value="Meticulous"><label class="fmt" for="habits2"> Meticulous</label><br>
<input type="radio" id="answer" name="habits2" value="Conscientious"><label class="fmt" for="habits2"> Conscientious </label>
<input type="radio" id="answer" name="habits2" value="Playful"><label class="fmt" for="habits2"> Playful</label><br>
<p><input type="submit" value="Submit"  class="button" ></p>
<p><input type="reset" value="Reset" class="button" ></p>
</form>

还尝试了以下功能

function checkAnswer(){
var response = document.getElementById('answer').value;
if (response == "Compassionate")
location = '../Results/results_empathy.html';
location.href = "../Results/results_empathy.html";
else if (response == "Meticulous")
location = '../Results/results_analytical.html';
location.href = "../Results/results_analytical.html";
else if (response == "Conscientious")
location = '../Results/results_diplomatic.html';
location.href = "../Results/results_diplomatic.html";    
else if (response == "Playful")
location = '../Results/results_creative.html';
location.href = "../Results/results_creative.html";
else
location = 'wrong.html';
return false;
}```
Expected Results are : 
If radio button selected for "Compassionate", then it has redirect to "results_empathy.html", similarly for "Meticulous" "Conscientious"

Answer 1

代替document.getElementById('answer');，使用 ：

document.querySelector('input[name="habits2"]:checked').value

看看这是否对您有帮助

Answer 2

提交form后，它将自动重定向到action属性中指定的位置。如果您有一个尝试设置location.href的submit回调，由于表单提交的性质而不起作用。

您需要做的是不使用submit按钮(因此不使用submit事件)，而只使用常规button及其click事件，或者您需要取消本机submit事件并手动控制重定向。

笔记：

• 使用单选按钮，您需要获取组的值，而不是任何 一个按钮。由于该组共享相同的名称，但只有一个可以 一次被选中，那么该组将只有一个 价值。这是您需要检查的值。

• 您缺少结束fieldset标记。

• 不需要javascript:。
• 不需要type=text/javascript。
• 不要使用 HTML 属性设置事件处理程序。做吧 在 JavaScript 中单独使用。
• 不要使用 HTML 元素，因为它们使内容看起来的方式。 您在fieldset中使用了h4元素，但h4应该 只有在h3后才能使用。标题标签用于创建 部分，不用于样式。

选项 1：使用不带submit事件的常规按钮：

<form action="#">
<fieldset class="ntset">
<legend>About Yourself</legend>
<h1>Your Character in One Word</h1>
<input type="radio" id="answer" name="habits2" value="Compassionate">
<label class="fmt" for="habits2"> Compassionate</label>
<input type="radio" id="answer" name="habits2" value="Meticulous">
<label class="fmt" for="habits2"> Meticulous</label><br>
<input type="radio" id="answer" name="habits2" value="Conscientious">
<label class="fmt" for="habits2"> Conscientious</label>
<input type="radio" id="answer" name="habits2" value="Playful">
<label class="fmt" for="habits2"> Playful</label><br>
<p><input type="button" value="Submit" class="button"> <input type="reset" value="Reset" class="button"></p>
</fieldset>
</form>
<script>
// Get all the element references you'll need just once
let answer = document.querySelector("[name='habits2']");
let submit = document.querySelector("input[type='button']");

// Configue event handlers in JavaScript, not with HTML attributes
submit.addEventListener("click", redirect);

function redirect() {
if(answer.value == "Compassionate"){
location.href = "../Results/results_empathy.html";
}else if(textValue == "Meticulous"){
location.href = "../Results/results_analytical.html";
}else if(textValue == "Conscientious"){
location.href = "../Results/results_diplomatic.html";
}else {
location.href = "../Results/results_creative.html";
}
}
</script>

选项 2：使用带有提交按钮的表单并取消提交事件：

<form action="#">
<fieldset class="ntset">
<legend>About Yourself</legend>
<h1>Your Character in One Word</h1>
<input type="radio" id="answer" name="habits2" value="Compassionate">
<label class="fmt" for="habits2"> Compassionate</label>
<input type="radio" id="answer" name="habits2" value="Meticulous">
<label class="fmt" for="habits2"> Meticulous</label><br>
<input type="radio" id="answer" name="habits2" value="Conscientious">
<label class="fmt" for="habits2"> Conscientious</label>
<input type="radio" id="answer" name="habits2" value="Playful">
<label class="fmt" for="habits2"> Playful</label><br>
<p><input type="submit" value="Submit" class="button"> <input type="reset" value="Reset" class="button"></p>
</fieldset>
</form>
<script>
// Get all the element references you'll need just once
let answer = document.querySelector("[name='habits2']");
let form = document.querySelector("form");

// Configue event handlers in JavaScript, not with HTML attributes
form.addEventListener("submit", redirect);

function redirect(event) {
// Cancel the form's native reaction to a submit
event.preventDefault();

if(answer.value == "Compassionate"){
location.href = "../Results/results_empathy.html";
}else if(textValue == "Meticulous"){
location.href = "../Results/results_analytical.html";
}else if(textValue == "Conscientious"){
location.href = "../Results/results_diplomatic.html";
}else {
location.href = "../Results/results_creative.html";
}
}
</script>