Soy principiante y tengo problemas con algo en JS que podría ser fácil de resolver.
Hice un cuestionario basado en un curso de NetNinja Udemy y quiero que el botón de envío se habilite justo cuando el usuario hace clic en cualquier opción de respuesta, y no antes, para que no pueda enviar un cuestionario totalmente vacío.
El cuestionario tiene 4 preguntas con 2 opciones cada una, y lo encontré de esta manera...
const input_a = document.getElementById("q1a"); const input_b = document.getElementById("q1b"); button.disabled = true; input_a.addEventListener('click', () => { button.disabled = false; }); input_b.addEventListener('click', () => { button.disabled = false; });...para habilitar el botón cuando el usuario haga clic en cualquiera de las dos opciones de la primera pregunta (ids: q1a y q1b) Siguiendo esta lógica, también estarían q2a, q2b, q3a, q3b, q4a y q4b..
Como hay una manera de incluir todas las respuestas en un elemento JS, ¿qué debo hacer en la función de evento para decir "cuando haga clic en cualquiera de estas 8 opciones, habilite el botón"? Porque todo lo que probé solo hace que la función funcione si hago clic en todos los botones, lo que obviamente es imposible en un Quiz.
¡Gracias! :)
En la solución a continuación, cuando se hace clic en cualquiera de los botones de radio, se activa el botón Enviar.
let result = [false, false, false, false]; let submitButton = document.getElementById('submitButton'); /* Returns true if all tests have been completed. */ function isValid(){ for(let i = 0 ; i < result.length ; ++i) if(result[i] != true) return false; return true; } /* If all tests are completed, the submit button is activated. */ function send(){ result[this.value] = true; if(isValid()){ submitButton.disabled = false; console.log("The form can be submitted!"); } } /* The send() method is called when the change event of <input> elements whose type is "radio" is fired. */ document.querySelectorAll('input[type="radio"]').forEach((element) => { element.addEventListener("change", send); }); <form action="#"> <input type="radio" id="html" name="test1" value="0"> <label for="html">HTML</label><br> <input type="radio" id="css" name="test1" value="0"> <label for="css">CSS</label><br><br> <input type="radio" id="js" name="test2" value="1"> <label for="html">JavaScript</label><br> <input type="radio" id="c#" name="test2" value="1"> <label for="css">C#</label><br><br> <input type="radio" id="c" name="test3" value="2"> <label for="html">C</label><br> <input type="radio" id="c++" name="test3" value="2"> <label for="css">C++</label><br><br> <input type="radio" id="python" name="test4" value="3"> <label for="html">Python</label><br> <input type="radio" id="ruby" name="test4" value="3"> <label for="css">Ruby</label><br><br> <button id="submitButton" type="submit" disabled>Submit</button> </form>