Adding up all fields with Javascript the simple way

Question

I have realised that there is a much simpler way of looking at this.

How would I add up all the fields within a form or another respectable body. There are a series of text fields that contain information some are dynamically loaded in but lets not worry about that for more.

Quite simply all the fields have a unique ID but with the same start structure in this case 'product_total_price_PRI_....' (whereby the ... is a unique number).

So my understanding of javascript is still in the reverse engineering side of things rather than building arrays and objects, so how would I add up all those fields with an onClick event for example. Something like onclick="total();"

Many Thanks,

subhaze · Accepted Answer · 2010-12-07 22:29:40Z

1

something like this might work...

not sure if you mean by "adding" if you're expecting all to be numeric and results added or just grab all the results and add them to an array... but this should be easily modified to add numeric data instead.

HTML

<form>
    <input id="product_total_price_PRI_asdfsdf" /><br /><br />
    <input id="product_total_price_PRI_sdfg" /><br /><br />
    <input id="product_total_price_PRI_fgh" /><br /><br />
    <input id="product_total_price_PRI_4356" /><br /><br />
    <input id="product_total_price_PRI_dfghfh" /><br /><br />
    <input type="button" value="submit" onClick="getFields()" />
</form>

JavaScript (updated to just get sum of inputs) Example of update

function getFields() {
    var inputs = document.getElementsByTagName('input'),
        result = 0;
    for( var i = 0; i < inputs.length; i++ ) {
        if( inputs[i].id.indexOf('product_total_price_PRI_') == 0 ) {
            var num = parseFloat( inputs[i].value );
            //if it's a valid number add it
            if( !isNaN( num ) ) result += num;
        }
    }
    alert( result );
}

working example JSFiddle

edited Dec 7, 2010 at 22:29

answered Dec 3, 2010 at 16:04

subhaze

8,8352 gold badges33 silver badges33 bronze badges

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

3 Comments

Walrus Over a year ago

Very good. The purpose of this is to add the um for the purpose of a sum. So I assume we need a ParseFLoat in here somewhere. Where abouts would I put it. The sum should add up the value only so I have stripped the result line to result+= inputs[i].value

subhaze Over a year ago

here is an update that adds the sum of the values in the textbox if it's a number jsfiddle.net/subhaze/szUey/30

subhaze Over a year ago

@Robin: Updated my answer to fit your needs.

Zach · Accepted Answer · 2010-12-03 15:36:26Z

0

Something like the following:

function total() {
    var i=0;
    var total=0;
    while (true) {
        var field = document.getElementById("product_total_price_PRI_" + String(i));
        if (!field)
            break;
        total += Number(field.value);
    }
    return total;
}

answered Dec 3, 2010 at 15:36

Zach

7,9503 gold badges23 silver badges26 bronze badges

Comments

Free Consulting · Accepted Answer · 2010-12-03 15:40:28Z

0

function summaFormae( form ) {
  var sum = 0;
  for ( var i = 0; i < form.elements.length; i++ )
    sum += parseFloat( form.elements[i].value );
  return sum;
}

answered Dec 3, 2010 at 15:40

Free Consulting

4,4161 gold badge34 silver badges55 bronze badges

Collectives™ on Stack Overflow

Adding up all fields with Javascript the simple way

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related