por ejemplo
<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>¿Cómo enviaría a los usuarios a diferentes páginas en la misma carpeta raíz que mi sitio web en función de sus respuestas a mis preguntas?
Dale una oportunidad a window.location.href
<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>Editar : formato
Primero, hay algunos errores en el código que deben corregirse.
A las entradas de radio les falta el atributo de name . Sin un valor para el conjunto de atributos de name , es huérfano.
Cada una de las entradas de radio a continuación se puede verificar al mismo tiempo y daría como resultado un comportamiento inesperado.
Además, falta una llave al final de la función de JavaScript '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>Para solucionar estos problemas, aquí está el código HTML que publicó con las partes faltantes completadas. Tenga en cuenta que ahora solo se puede seleccionar una de las opciones.
<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>Después de solucionar estos problemas, la respuesta de kawnah es una buena solución usando location.href para cambiar las páginas según la opción seleccionada.