Member Avatar for lailalaila

Hi there,

I'm trying to figure out how I can have a script add up the number of radio buttons selected for each category. For example, on a test, I'll have three options for each question. I want to add up how many A's are selected, how many B's are selected and how many C's are selected for each question.

I'm not very learned in Javascript, but I know I can use it to accomplish this. I searched Google and found a script that would do this with TWO options, but I need it done with THREE, and cannot figure out how to change the code :(. Please help. Here's the script I found:

<FORM NAME="radioForm">
Question 0? Yes <INPUT TYPE="RADIO" NAME="q0">
No <INPUT TYPE="RADIO" NAME="q0"><BR>
Question 1? Yes <INPUT TYPE="RADIO" NAME="q1">
No <INPUT TYPE="RADIO" NAME="q1"><BR>
Question 2? Yes <INPUT TYPE="RADIO" NAME="q2">
No <INPUT TYPE="RADIO" NAME="q2"><BR>
Question 3? Yes <INPUT TYPE="RADIO" NAME="q3">
No <INPUT TYPE="RADIO" NAME="q3"><BR>
Question 4? Yes <INPUT TYPE="RADIO" NAME="q4">
No <INPUT TYPE="RADIO" NAME="q4"><BR>
Question 5? Yes <INPUT TYPE="RADIO" NAME="q5">
No <INPUT TYPE="RADIO" NAME="q5"><BR>
Question 6? Yes <INPUT TYPE="RADIO" NAME="q6">
No <INPUT TYPE="RADIO" NAME="q6"><BR>
Question 7? Yes <INPUT TYPE="RADIO" NAME="q7">
No <INPUT TYPE="RADIO" NAME="q7"><BR>
Question 8? Yes <INPUT TYPE="RADIO" NAME="q8">
No <INPUT TYPE="RADIO" NAME="q8"><BR>
Question 9? Yes <INPUT TYPE="RADIO" NAME="q9">
No <INPUT TYPE="RADIO" NAME="q9"><BR>

<P>
<INPUT TYPE="BUTTON" onClick="showAnswers()" VALUE="Check Answers">
yes: <INPUT TYPE="TEXTBOX" NAME="yes" VALUE="" SIZE="3">
no: <INPUT TYPE="TEXTBOX" NAME="no" VALUE="" SIZE="3">
</FORM>

<SCRIPT LANGUAGE="JavaScript"><!--
function showAnswers() {
    var yes = 0;
    var no = 0;
    for (var i=0;i<10;i++) {
        if (eval("document.radioForm.q" + i + "[0].checked") == true)
            yes++;
        if (eval("document.radioForm.q" + i + "[1].checked") == true)
            no++;
    }
    document.radioForm.yes.value = yes;
    document.radioForm.no.value = no;
}
//--></SCRIPT>

Thanks! :)

Edited by Dani because: Formatting fixed
  • 2 Contributors
  • 1 Reply
  • 143 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by MartinRinehart

Dani AI

Generated

The posted problem from is a simple tally: count how many A, B and C radios are selected across the quiz. The original sample used an indexed eval-based approach that only handled two choices; was right to call that out. A cleaner pattern is to give each option a value (for example "A", "B", "C") and then scan the DOM for checked radios and tally by value. That avoids eval, works with any number of questions, and is easy to extend.

Example: a small, robust function that returns a frequence map of selected values.

function countByValue(form) {
  form = form || document;
  var counts = {};
  if (form.querySelectorAll) {
    var checked = form.querySelectorAll('input[type="radio"]:checked');
    for (var i = 0; i < checked.length; i++) {
      var v = (checked[i].value || '').toUpperCase();
      counts[v] = (counts[v] || 0) + 1;
    }
  } else {
    var inputs = form.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
      var el = inputs[i];
      if (el.type === 'radio' && el.checked) {
        var v = (el.value || '').toUpperCase();
        counts[v] = (counts[v] || 0) + 1;
      }
    }
  }
  return counts;
}

// Usage: var res = countByValue(document.forms['radioForm']);
// res.A, res.B, res.C  (undefined means zero)

Practical notes: each question's radios must share a name so only one can be selected; each radio needs a clear value (case normalized above). For live updates attach a change handler on the form/container and call countByValue; to submit totals server-side write the counts into hidden inputs before submit. This approach is simple, avoids eval, and scales beyond three options if needed.

Member Avatar for MartinRinehart

You can't figure it out because your sample script is quite awful. Back to the beginning and let's fix some stuff. First, do you have the markup (HTML) ready with three choices per answer?

Get that ready, post it here (please, not all of it - two or three questions followed by ". . .") and then annotate the script with comments like:

var yes = 0; // initial count of "yes" answers
. . .
if (eval( . . . ) ) // I've no clue!

The "eval" should never have been coded. JS guru Douglas Crockford says, "Eval is evil."

Then it's a question of clarifying (and replacing!) the fuzzy bits.

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.