Activating button with input type="radio"

Question

I have a 5-question form, where the questions are shown one at a time to the user, like a quiz. Question 1 uses input type="radio". I would like to know if there is a way not to have to call the function checkObjective() for each input, and thus avoid repetitions.

My current code is working and this is it:

<form class="questions_box formulario" action="enviar-landing-page-v3.php" method="post">
    <div id="question-1">
        <h3>The question is: ... ?</h3>
        <input type="radio" name="objetivo" id="question-1-answer-a" value="1" required oninput="checkObjective()" /> Answer 1.<br />
        <input type="radio" name="objetivo" id="question-1-answer-b" value="2" oninput="checkObjective()" /> Answer 2.<br />
        <input type="radio" name="objetivo" id="question-1-answer-c" value="3" oninput="checkObjective()" /> Answer 3.<br />

        <div class="text-end mt-3">
            <input type="submit" id="submit1" class="btn btn-primary btn-lg" value="Enviar Resposta" style="display: none;" />
        </div>

        <script type="text/javascript">
            function checkObjective() {
                if (document.getElementsByName("objetivo").value == "") {
                    document.getElementById("submit1").style.display = "none";
                } else {
                    document.getElementById("submit1").style.display = "block";
                }
            }
        </script>
    </div>
</form>

you can give all the radios a class and simply add an `eventListener` to the class to avoid using `oninput="checkObjective()"` on every single radio — I_love_vegetables, Aug 05 '21 at 02:30
This might help: https://stackoverflow.com/questions/8922002/attach-event-listener-through-javascript-to-radio-button — Steve, Aug 05 '21 at 02:32

score 2 · Answer 1 · edited Aug 10 '21 at 16:41

If I understood your question properly, you don't want to add oninput="checkObjective()" repeatedly on each individual radio button.

In that case, you can simply give them a common class and attach an eventListener to them.

<input type="radio" class="radionButton" name="objetivo" id="question-1-answer-a" value="1" required /> Answer 1.<br />
<input type="radio" class="radionButton" name="objetivo" id="question-1-answer-b" value="2" /> Answer 2.<br />
<input type="radio" class="radionButton" name="objetivo" id="question-1-answer-c" value="3" /> Answer 3.<br />

document.querySelectorAll('.radioButton').forEach(item => {
  item.addEventListener('click', event => {
    checkObjective();
  });
});

Just put stuff between `""`. Like: `value="3"`. – Kevin M. Mansour Aug 10 '21 at 14:47 — Kevin M. Mansour, Aug 10 '21 at 14:47

score 0 · Answer 2 · answered Aug 05 '21 at 02:59

const radios = document.querySelectorAll('div[id^="question"] input[type="radio"]');
for (const radio of radios) {
  radio.addEventListener('input', checkObjective);
}

function checkObjective() {
  const n = Number(this.id.match(/question-(\d+)/)[1]);
  document.getElementById(`submit${n}`).style.display = 'block';
  const next = document.getElementById(`question-${n + 1}`);
  if (next) { next.style.display = 'block'; }
}

div[id^="question"]:nth-of-type(n+2) {
  display: none;
}

<div id="question-1">
                    <h3>The question is: ... ?</h3>
                    <input type="radio" name="objetivo" id="question-1-answer-a" value=1 required> Answer 1.<br>
                    <input type="radio" name="objetivo" id="question-1-answer-b" value=2> Answer 2.<br>
                    <input type="radio" name="objetivo" id="question-1-answer-c" value=3> Answer 3.<br>

                    <div class="text-end mt-3">
                        <input type="submit" id="submit1" class="btn btn-primary btn-lg" value="Enviar Resposta" style="display: none;" />
                    </div>
                </div>

                <div id="question-2">
                    <h3>The question is: ... ? (2)</h3>
                    <input type="radio" name="objetivo2" id="question-2-answer-a" value=1 required> Answer 1.<br>
                    <input type="radio" name="objetivo2" id="question-2-answer-b" value=2> Answer 2.<br>
                    <input type="radio" name="objetivo2" id="question-2-answer-c" value=3> Answer 3.<br>

                    <div class="text-end mt-3">
                        <input type="submit" id="submit2" class="btn btn-primary btn-lg" value="Enviar Resposta2" style="display: none;" />
                    </div>
                </div>

Activating button with input type="radio"

2 Answers2