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

Question

My webpage takes inputs from users using a form with radio buttons. Once user completes the form with all radio buttons and click submit button, it needs to redirect to web page based on the radio button selected

I have multiple fieldsets within the form, but i wanted to use only specific radio buttons for redirect purpose. so i refer the 'id' in input.

I tried onSubmit and action in the form, both doesn't seems helping.

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

if i use action, it simply redirects to first html page for all the radio button inputs , whereas onSubmit doesn't redirect at all

Also tried the multiple functions, but no luck yet

<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>

Also tried the following function

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

Instead of document.getElementById('answer'); , use :

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

See if that helps you

Answer 2

When a form is submitted, it will automatically redirect to the location specified in the action attribute. If you have a submit callback that tries to set location.href that won't work because of the nature of form submissions.

What you need to do is either not use a submit button (and therefore the submit event) and just use a regular button and its click event or you need to cancel the native submit event and manually control the redirect.

NOTES:

• With radio buttons, you need to get the value of the group, not any one button. Since the group all share the same name, but only one can be selected at a time, then the group will only ever have a single value. It's that value you need to check.

• You are missing your closing fieldset tag.

• javascript: isn't needed.
• type=text/javascript isn't needed.
• Don't set up your event handlers with HTML attributes. Do it separately in JavaScript.
• Don't use HTML elements because of the way they make content look. You are using an h4 element in your fieldset but an h4 should only ever be used after an h3 . Heading tags are for creating sections, not for styling.

OPTION 1: Use regular button without submit event:

 <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> 

OPTION 2: Use a form with submit button and cancel the submit event:

 <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>