Shortening JavaScript Function

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?

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;
}

jQuery is a great library that's like using JavaScript on steroids. It is well worth learning and there are plenty of examples out in the wild.

You can write complex "selectors" quite like this:

$('input[name=form[radio1]]').attr('checked').each(function() {
      result.value = $(this).attr('value')
})

(I'm not sure if it will accept a name like "form[radio1]" as valid, but give it a try.