Shortening JavaScript Function

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?

Matt Ball · Accepted Answer · 2010-11-04 16:09:07Z

4

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

edited Nov 4, 2010 at 16:09

answered Nov 4, 2010 at 14:27

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

7 Comments

Dom Over a year ago

Irs great i believe, the thing is that I simply dont know JavaScript. So I might simply ask for function that will work please?

Matt Ball Over a year ago

@Dom see my edit. I think I've re-created what your function was trying to do. That said, if you "simply don't know JavaScript" then perhaps you should work on actively learning it rather than asking for the answer.

Dom Over a year ago

@ Matt I completely agree with you. And this is my next step. Im kind of beginner with jQuery and JavaScript and please believe me, but this one - I just needed solution. Unfortunately this doesn't work form me. I really need help on that. Desperate. Is there anything else I need to post to help out with finding solution?

Matt Ball Over a year ago

@Dom: I'm not a psychic and I don't have a crystal ball. You need to describe, precisely, what isn't working: what should be happening, and what is happening instead? It might also be helpful if you could show some of the relevant HTML. An online tool like jsfiddle.net is extremely useful.

Dom Over a year ago

@Matt Thank you for your hely. Really. Ive just added my html. Basically want summarise all the values.

|

Diodeus - James MacFarlane · Accepted Answer · 2010-11-04 14:42:37Z

0

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.

answered Nov 4, 2010 at 14:42

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

3 Comments

user113716 Over a year ago

You would need to escape the [] like \\\[. And would probably want to use the attribute starts with selector like 'input[name^=form\\\[radio]'.

Matt Ball Over a year ago

I don't know whether to +1 or -1 this answer, for recommending jQuery.

user113716 Over a year ago

@Matt - Yeah, I don't really like it when unsolicited js library solutions are given.

Collectives™ on Stack Overflow

Shortening JavaScript Function

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related