I need to redirect based on the response to an html Form submission-CodePudding

for example

<form onsubmit="submitForm(event)">
    <p> Do you like cats or dogs </p>
    <input type="radio" id="cat" value="Cats">
    <label for="cat">Cats</label>
    <input type="radio" id="dog" value="Dogs">
    <label for="dog">Dogs</label><br>
    <button>Submit</button>
</form>
<script>
    function submitForm(event) {
        if(document.getElementById('cat').checked) {
            //(send the user to the cat page)
  
        }else if(document.getElementById('dog').checked) {
            //(send the user to the dog page)
        }
</script>

how would I send users to different pages in the same root folder as my website based on their responses to my questions

CodePudding user response：

Give window.location.href a shot

<form onsubmit="submitForm(event)">
    <p> Do you like cats or dogs </p>
    <input type="radio" id="cat" value="Cats">
    <label for="cat">Cats</label>
    <input type="radio" id="dog" value="Dogs">
    <label for="dog">Dogs</label><br>
    <button>Submit</button>
</form>
<script>
    function submitForm(event) {
        if(document.getElementById('cat').checked) {
            //(send the user to the cat page)
            window.location.href = 'yoursite.com/cat'
  
        }else if(document.getElementById('dog').checked) {
            //(send the user to the dog page)
            window.location.href = 'yoursite.com/dog'
        }
</script>

CodePudding user response：

Edit: Formatting

First, there are a few errors in the code that need to be fixed.

The radio inputs are missing the name attribute. Without a value for the name attribute set, it is an orphan.

Each of the radio inputs below can be checked at the same time and would result in unexpected behavior.

In addition, there is a missing curly brace at the end of the JavaScript function 'submitForm'

<form onsubmit="submitForm(event)">
  <p> Do you like cats or dogs </p>

  <!-- Missing 'name' attribute' -->
  <input type="radio" id="cat" value="Cats">
  <label for="cat">Cats</label>

  <!-- Missing 'name' attribute' -->
  <input type="radio" id="dog" value="Dogs">
  <label for="dog">Dogs</label><br>

  <button>Submit</button>
</form>

<script>
  function submitForm(event) {
    if (document.getElementById('cat').checked) {
      //(send the user to the cat page)

    } else if (document.getElementById('dog').checked) {
      //(send the user to the dog page)
    }
  // <-Missing closing curly brace for 'submitForm'
</script>

To fix these issues, here is the HTML you posted with the missing pieces filled in. Note that only one of the choices can be selected now.

<form onsubmit="submitForm(event)">
  <p>Do you like cats or dogs</p>
  
  <!-- Now has a name attribute set to 'PetChoiceRadioGroup' -->
  <input type="radio" id="cat" value="Cats" name="PetChoiceRadioGroup" />
  <label for="cat">Cats</label>
  
  <!-- Now has a name attribute set to 'PetChoiceRadioGroup' -->
  <input type="radio" id="dog" value="Dogs" name="PetChoiceRadioGroup" />
  <label for="dog">Dogs</label><br>
  
  <button type="submit">Submit</button>
</form>


<script>
  function submitForm(event) {
    if (document.getElementById('cat').checked) {
      //(send the user to the cat page)

    } else if (document.getElementById('dog').checked) {
      //(send the user to the dog page)
    }
  } // <-Curly brace no longer missing
</script>

After fixing these issues, kawnah’s answer is a good solution using location.href to change pages based on the choice selected.