How can I select radio button values through for loop in JavaScript?

Question

I'm writing a form for a personality test. The page has questions where the user would need to choose an answer for each. The page will not allow the user to skip questions and it will alert them to answer the missing questions. When the form is submitted, the page will show the score.

I'm trying to store the values of radio buttons in an array using a for loop. It is not working.

Here is the HTML code:

<!-- Form -->
<form name="quiz" onsubmit="return show()">

    <!-- Question 1 -->
    <p>Question 1</p>
    <input type="radio" name="q0" value="a"> a
    <br>
    <input type="radio" name="q0" value="b"> b
    <br>
    <input type="radio" name="q0" value="c"> c

    <!-- Question 2 -->

    <!-- Question 3 -->

    <!-- Question 4 -->

    <!-- Question 5 -->
    <p>Question 5</p>
    <input type="radio" name="q4" value="a"> a
    <br>
    <input type="radio" name="q4" value="b"> b
    <br>
    <input type="radio" name="q4" value="c"> c

    <!-- Submit Button -->
    <input type="submit" value="Show Result">

</form>

Here is my JavaScript code:

function show() {

    var questions = 5;
    var score = 0;
    var solution = ["a", "c", "a", "b", "b"];
    var answers = [];

    for (i = 0; i < questions; i++) {

        answers[i] = document.quiz.eval('q' + i).value;

        if (answers[i] == null || answers[i] == '') {
            window.alert("You need to answer question " + (i + 1));
            return false;
        }

        if (solution[i] == answers[i]) {
            score++;
        }

    }
    window.alert(score);
}

what errors are you seeing in the *browser developer tools console* - I ask because `document.quiz.eval` looks like a made up function name - perhaps you wanted something like `document.forms.namedItem('quiz').elements.namedItem('q'+i).value` — Jaromanda X, Nov 14 '16 at 04:47
Possible duplicate of [Get Radio Button Value with Javascript](http://stackoverflow.com/questions/9618504/get-radio-button-value-with-javascript) — Emile Bergeron, Nov 14 '16 at 06:31

score 0 · Answer 1 · edited May 23 '17 at 11:53

What you need is a validating function.

// Since you mentionned
// "I'm trying to store the values of radio buttons in an array"
var answers = [];

var show = (function(answers) {
    // evaluate this once and avoid globals
    var questions = 5,
        solution = ["a", "c", "a", "b", "b"],
        form = document.quiz;

    // and return a validate function
    return function() {

        var score = 0,
            success = solution.every(function(value, i) {

                // get the value of the form field, notice the brackets
                var current = answers[i] = form['q' + i].value;
                if (current === value) {
                    score++;
                } else if (current == null || current == '') {
                    alert("You need to answer question " + (i + 1));
                    return false;
                }
                return true;
            });
        if (success) alert("Score: " + score);
        return success;
    };

})(answers);

The important part is document.quiz['q' + i]. See Get Radio Button Value with Javascript.

Vinay · Accepted Answer · 2016-11-14T06:40:37.963

0

eval is a property of window object and not the form , but in fact you don't actually need to use it.

Solution 1. replace

answers[i] = document.quiz.eval('q'+i).value;

with

var tmp = 'q'+i;
answers[i] = document.quiz[tmp].value;

Solution 2. replace

 answers[i] = document.quiz.eval('q'+i).value;

with

 document.quiz['q'+i].value;

NOTE: Even if you could use eval like the way you wanted (using prototypes) it would still give error because on this line

 answers[i] = document.quiz.eval('q'+i).value;

suppose i=0 eval would try to evaluate q0 (treating it as a named variable) and you don't have any variable with that name in your global scope

edited Nov 14 '16 at 06:40

answered Nov 14 '16 at 05:48

Vinay

7,442
6
25
48

`i.toString()` is redondant here, as `'q' + i` is enough already. – Emile Bergeron Nov 14 '16 at 06:02
Again, the parenthesis in your second solution are unnecessary. – Emile Bergeron Nov 14 '16 at 06:24
These: `document.quiz[('q'+i)]` – Emile Bergeron Nov 14 '16 at 06:29
No , it's required `q0` is a property of `quiz` without but `'q'+i` gives a string and using it like `document.quiz."q0"` would be an error – Vinay Nov 14 '16 at 06:32
1

Nope, because the bracket notation needs a string, like `document.quiz['q0']`. Also, `[('q'+i)]` is equivalent once evaluated to `['q0']`. – Emile Bergeron Nov 14 '16 at 06:34
I tried answer 2 and it works perfectly. Thank you everyone for your answers. My goal with this code is to reduce the code needed to get the results I want as much as possible. – Bilal Nov 16 '16 at 05:59

score 0 · Answer 3 · answered Nov 14 '16 at 05:55

0

You need to loop through each of the radio button options for each radio group to find the checked input and get it's value. At the moment you are just looping through each group.

Add this at the beginning of your for loop:

var radioButtons = document.getElementsByName("q"+i);
for (var x = 0; x < radioButtons.length; x ++) {
  if (radioButtons[x].checked) {
   answers[i] = radioButtons[x].value;
 }
}

answered Nov 14 '16 at 05:55

partypete25

4,353
1
17
16

This is not necessary. – Emile Bergeron Nov 14 '16 at 06:00

How can I select radio button values through for loop in JavaScript?

3 Answers3