CODEWITHSUNDEEP
javascripthtmlradio-button
mauguerra
mauguerra

Reputation: 3858

Getting radio-button value on a loop

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!

Upvotes: 3

Views: 7548

Answers (3)

user1370510
user1370510

Reputation: 120

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

Upvotes: 2

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

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.

Upvotes: 1

j08691
j08691

Reputation: 208032

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.

Upvotes: 2

Related Questions