Question

I have a function which loops through a form and finds the values of each element, for example, checkboxes, input fields etc. as it loops through the tags of this form it adds them onto a string, for example, if I had a select tag with several option tags inside of it, it would take the value of the select tag, which is conveniently the currently selected value of the select tag, and add it to the string.

The problem is, radio buttons don’t seem to have a place in the form where they store their current value. I know that radio buttons are grouped by name, but how can I find out which radio button is selected without using an id for the radio button’s tag? in addition, my form will have several different radio button groups, and must be able to retrieve the values of each of them individually once I click submit.

Here is an example radio button form

    <form id="radioTestForm">
        <input type="radio" name="group1" value="cows">1</input>
        <input type="radio" name="group1" value="ducks">2</input>
        <input type="button" onclick="radioTest()" value="submit"></input>
    </form>

On a final note, I can’t use jquery for this, it has to be in javascript.

Answer 1

function getRadioValue()
{
    for (var i = 0; i < document.getElementsByName('group1').length; i++)
    {
        if (document.getElementsByName('group1')[i].checked)
        {
            return document.getElementsByName('group1')[i].value;
        }
    }
}

Working Demo