Getting radio-button value on a loop

Question

I am working with a javascript function which takes the value of some questions using RadioButtons of YES or NO. To get the value of one question(Q1) I do something like this:

for (i=0; i<document.form1.Q1.length; i++){
   if(document.form1.Q1[i].checked)
       Array[0] = document.form1.Q1[i].value;
}

I have to do this for every question, so the code is getting very long. So I am trying to make a function or a loop in which the name of the question is changing. My only problem is that i dont know how to use a Variable on document.form1.VARIABLE.value. I already tried some ways but didnt work.

Can anyone help me with this?

Thanks a lot!

@j08691 actually I use an Array, so I use Array[0] = document.form1.Q1[i].value; Array[1] = document.form1.Q2[i].value; And so on! — mauguerra
– mauguerra, Commented May 2, 2012 at 16:52

Stefan van den Akker · Accepted Answer · 2015-11-17 08:28:21Z

2

use

document.forms['form-name']['radio-button-name'].value

and give radio button names like que_1 que_2 so you can change that with i using string concatenation

edited Nov 17, 2015 at 8:28

Stefan van den Akker

7,0597 gold badges52 silver badges69 bronze badges

answered May 2, 2012 at 17:10

user1370510

1207 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

j08691 · Accepted Answer · 2012-05-02 17:31:36Z

2

Here's a loop that will traverse your radio buttons and build an array with the values. In the code and example, it's set for testing three questions (named Q1, Q2, and Q3). When done, the array "aux" contains the list of checked values:

var max = 3;
var aux = new Array();
function getCheckedValue(groupName) {
    var radios = document.getElementsByName(groupName);
    for (i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            return radios[i].value;
        }
    }
    return null;
}
function check() {
    for(var i=1;i<=max;i++) {
        //console.log(i,getCheckedValue('Q'+i));
        aux[i-1] = getCheckedValue('Q'+i);
    }
    console.log(aux);
}

jsFiddle example.

answered May 2, 2012 at 17:31

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

Madara's Ghost · Accepted Answer · 2012-05-02 17:36:06Z

1

~~Don't use radio buttons, use checkboxes instead (checked=yes, unchecked=no). Then you can iterate your checkboxes freely, and see what's checked and not.~~ Striked out, OP needs the difference between "yes", "no" and "no answer".

After some extensive coding (my JS is rusty) I came up with the following:

<form name=form1 id=form1 action="index.php">
    <p>Question 1</p>
    <label><input type="radio" name="Q1" value="yes">Yes</label>
    <label><input type="radio" name="Q1" value="no">No</label>

    <p>Question 2</p>
    <label><input type="radio" name="Q2" value="yes">Yes</label>
    <label><input type="radio" name="Q2" value="no">No</label>

    <p>Question 3</p>
    <label><input type="radio" name="Q3" value="yes">Yes</label>
    <label><input type="radio" name="Q3" value="no">No</label>

    <button id="go">Go!</button>
</form>

<script type="text/javascript">
    check = function (e) {
        e.preventDefault(); //Don't submit!
        var result = [];
        var form = document.getElementById("form1");
        for (var i = 1; typeof(form["Q" + i]) != "undefined"; i++) {
            for (var j = 0; j < form["Q" + i].length; j++) {
                if (form["Q" + i][j].checked) {
                    result.push(form["Q" + i][j].name + " " + form["Q" + i][j].value);
                }
            }
        }
        console.log(result);
    }

    button = document.getElementById("go");
    button.onclick = check;

</script>

Triggered by clicking the "Go!" button.

The point is using the string concatenation of "Q" and i to get to "Q1" "Q2" etc.

edited May 2, 2012 at 17:36

answered May 2, 2012 at 16:54

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

7 Comments

j08691 Over a year ago

So what then prevents some fool from checking yes and no for every question?

Madara's Ghost Over a year ago

@j08691: Only one checkbox, checked = yes, and unchecked = no. [x] Question 1, [ ] Question 2 etc.

mauguerra Over a year ago

@Truth They have to be radiobuttons. Because I need to know the difference between the value="NO" and if there is not any answer.

j08691 Over a year ago

Don't use checkboxes, use radio buttons as this is what they were intended for.

j08691 Over a year ago

@Truth - Spare me your condescending attitude. Radio buttons are used for selecting zero or one item from a group. Period. Checkboxes are used for selecting zero or more items from a group. So while a single checkbox might get the job done, it is not the proper UI to present to a user, nor is it the proper choice for this question.

|

Collectives™ on Stack Overflow

Getting radio-button value on a loop

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related