CODEWITHSUNDEEP
javascripthtml
SamKarmy
SamKarmy

Reputation: 21

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

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

Upvotes: 2

Views: 140

Answers (2)

Dan Mullin
Dan Mullin

Reputation: 4435

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.

Upvotes: 1

kawnah
kawnah

Reputation: 3404

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>

Upvotes: 3

Related Questions