Question

I must admit, I don’t know much about JavaScript that is why my question might sound little bit silly.

But what I’m trying to do is grab values from selected by name radio groups.

It looks like this

function calc() {
    var op1 = document.getElementsByName('form[radio1]');
    var op2 = document.getElementsByName('form[radio2]');
    var op3 = document.getElementsByName('form[radio3]');

    var result = document.getElementById('result');

    result.value = 0;

    result.value = parseInt(result.value);

    for (i = 0; i < op1.length; i++) {
        if (op1[i].checked) result.value = parseInt(result.value) + parseInt(op1[i].value);
    }

    for (i = 0; i < op2.length; i++) {
        if (op2.options[i].selected) result.value = parseInt(result.value) + parseInt(op2[i].value);
    }

    for (i = 0; i < op3.length; i++) {
        if (op3.options[i].selected) result.value = parseInt(result.value) + parseInt(op3[i].value);
    }

    return false;
}

And this is my form. Im using rs form for joomla.

<form action="index.php" enctype="multipart/form-data" id="userForm" method="post">

    <input name="form[radio1]" value="25" id="radio20" type="radio">
        <label for="radio20">Description1</label>

    <input name="form[radio1]" value="35" id="radio21" type="radio">
        <label for="radio21">Description2</label>



    <input name="form[radio2]" value="20" id="radio20" type="radio">
    <label for="radio20">Description1</label>

    <input name="form[radio2]" value="30" id="radio21" type="radio">
    <label for="radio21">Description2</label>


    <input type="hidden" value="0" id="result" name="form[result]">

    <input type="submit" class="rsform-submit-button" onclick="calc()" id="submit" name="form[submit]" value="submit">

And everything would be OK, as the function is working. the only trouble is that I have about 80 radiograms.

Is there a way to shorten it?

Answer 1

Use arrays of objects (like all the radio buttons, for instance) and iterate over them. Start like this:

var opts = [],
    numOpts = 80;

for (var i=0; i<numOpts, i++)
{
    opts.push(document.getElementsByName('form[radio' + i + ']'));
}

---

Edit: let’s have a go at the full function. The only thing I’m not 100% sure about is whether you mean to use opX[i].checked or opX.options[i].selected (since your code does different things for op1 and op2/3). Shouldn’t be too hard to extrapolate if I’ve guessed wrong, though.

function calc()
{
    var opts = [],
        numOpts = 80,
        value = 0,
        result = document.getElementById('result'),
        i, j, opt;

    for (i=0; i<numOpts; i++)
    {
        opts.push(document.getElementsByName('form[radio' + i + ']'));
    }

    numOpts = opts.length;

    for (i=0; i<numOpts; i++)
    {
        opt = opts[i];
        for (j=0; j<opt.length; j++)
        {
            // or did you mean:
            // if (opt.options[j].selected) ?
            if (opt[j].checked)
            {
                value = value + parseInt(opt[j].value, 10);
            }
        }
    }

    result.value = value;

    return false;
}