title: Redirect to web page based on radio button using submit button in html
body: <p>My webpage takes inputs from users using  a <code>form</code> 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</p>
  
  <p>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.</p>
  
  <p>I tried onSubmit and action in the form, both doesn't seems helping.</p>
  
  <p><code>&lt;form onSubmit="javascript:redirect();" method="post"&gt;</code>
  <code>&lt;form action="javascript:redirect();"&gt;</code></p>
  
  <p>if i use action, it simply redirects to first html page for all the radio button inputs , whereas onSubmit doesn't redirect at all</p>
  
  <p>Also tried the multiple functions, but no luck yet </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      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";
      }
  }
  &lt;/script&gt;
  
  &lt;form action="javascript:redirect();"&gt;
  
      &lt;fieldset class="ntset"&gt;
      &lt;legend&gt;About Yourself&lt;/legend&gt;
    &lt;h4&gt;Your Character in One Word&lt;/h4&gt;
           &lt;input type="radio" id="answer" name="habits2" value="Compassionate"&gt;&lt;label class="fmt" for="habits2"&gt; Compassionate&lt;/label&gt;
       &lt;input type="radio" id="answer" name="habits2" value="Meticulous"&gt;&lt;label class="fmt" for="habits2"&gt; Meticulous&lt;/label&gt;&lt;br&gt;
            &lt;input type="radio" id="answer" name="habits2" value="Conscientious"&gt;&lt;label class="fmt" for="habits2"&gt; Conscientious &lt;/label&gt;
       &lt;input type="radio" id="answer" name="habits2" value="Playful"&gt;&lt;label class="fmt" for="habits2"&gt; Playful&lt;/label&gt;&lt;br&gt;
  
  &lt;p&gt;&lt;input type="submit" value="Submit"  class="button" &gt;&lt;/p&gt;
      &lt;p&gt;&lt;input type="reset" value="Reset" class="button" &gt;&lt;/p&gt;
  
  &lt;/form&gt;
  
  </code></pre>
  
  <p>Also tried the following function</p>
  
  <pre><code>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"
  </code></pre>