Member Avatar for manchurianCEO
manchurianCEO 0 Light Poster

Hi there,

I am trying to make a small javascript questionaire to include in a website for this non profit where I volunteer. It would basically ask people a few yes-no questions and I would like it that at the end, if all check yes, it would give something (congrats... you qualify etc. etc.) and if there is a "No", once the last question is checked it says something like "please consult..."

I'm stuck at the radio buttons, haven't programmed for a couple of years. Any help would be greatly appreciated.

Thank you!

ie.

Do I qualify?
<br>
<br>

(a) "Question"
<label><input type="radio" name="yesno" value="yes" checked="checked"> yes</label>
<label><input type="radio" name="yesno" value="no"> no</label>
<br>

(a) "Question 2"
<label><input type="radio" name="yesno" value="yes" checked="checked"> yes</label>
<label><input type="radio" name="yesno" value="no"> no</label>
.
.
.
.

  • 1 Contributor
  • 0 Replies
  • 112 Views

Dani AI

Generated

In 's snippet the radios are grouped incorrectly: every radio used the same name, so only one option across the whole page could be selected. Radio buttons are grouped by their name attribute, so each question needs its own name (for example q1, q2, ...), or the markup can use a container per question and the script can query each container for a checked input.

A compact, robust pattern is to wrap each question in a fieldset (for accessibility), give each radio pair the same question-specific name, and then evaluate all fieldsets for a checked radio. The example below shows a simple HTML + JS approach that reports “all yes”, “please consult”, or “answer all questions”:

<form id="quiz">
  <fieldset data-q>
    <legend>Question 1</legend>
    <label><input type="radio" name="q1" value="yes"> Yes</label>
    <label><input type="radio" name="q1" value="no"> No</label>
  </fieldset>

  <fieldset data-q>
    <legend>Question 2</legend>
    <label><input type="radio" name="q2" value="yes"> Yes</label>
    <label><input type="radio" name="q2" value="no"> No</label>
  </fieldset>

  <button id="check" type="button">Check</button>
  <div id="result" aria-live="polite"></div>
</form>

<script>
document.getElementById('check').addEventListener('click', evaluate);

function evaluate() {
  var groups = document.querySelectorAll('fieldset[data-q]');
  var allYes = true;
  for (var i = 0; i < groups.length; i++) {
    var sel = groups[i].querySelector('input[type="radio"]:checked');
    if (!sel) {
      document.getElementById('result').textContent = 'Please answer all questions.';
      return;
    }
    if (sel.value.toLowerCase() !== 'yes') allYes = false;
  }
  document.getElementById('result').textContent = allYes
    ? 'Congrats — you qualify'
    : 'Please consult...';
}
</script>

Troubleshooting notes: place the script after the form or run on DOMContentLoaded; use aria-live for screen-reader updates; add required to radios or validate for unanswered questions. For reference on how radio grouping works, see the MDN documentation on radio inputs: Radio input element.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.