使用HTML

Question

我的网页使用带有单选按钮的form接收用户的输入。 用户填写完所有单选按钮的表单并单击“提交”按钮后，需要根据所选的单选按钮重定向到网页

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

我尝试了表单中的onSubmit和action，似乎都没有帮助。

<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属性中指定的位置。如果您有submit回调试图设置location.href，则由于表单提交的性质而无法使用。

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

注释：

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

• 您缺少结束的fieldset标签。

不需要
• javascript:。
不需要
• type=text/javascript。
• 请勿使用HTML属性设置事件处理程序。做吧 分别在JavaScript中使用。
• 不要使用HTML元素，因为它们使内容看起来更漂亮。 您在h4中使用了fieldset元素，但应该使用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>