CODEWITHSUNDEEP
javascript
Faizan
Faizan

Reputation: 101

Javascript Array Sum

How I can sum up the values filled in unitprice array using javascript Here is my html.

   <td>
       <input type="text" style="width: 60px; background: none repeat scroll 0% 0% rgb(255, 255, 255);" maxlength="4" id="unitprice" name="unitprice[]">
   </td>
   <td>
       <input type="text" style="width: 60px; background: none repeat scroll 0% 0% rgb(255, 255, 255);" maxlength="4" id="unitprice" name="unitprice[]">
   </td>

Upvotes: 7

Views: 44711

Answers (5)

Ahmed Elsied
Ahmed Elsied

Reputation: 11

//arr it's your array input vlaue array.push(input.val())

function array_sum(arr){
    var sum = 0;
   for(var i = 0; i < arr.length; i++){
        sum += parseInt(arr[i]);
    }
    return sum;
}

Upvotes: 1

derenard
derenard

Reputation: 501

If you can get the values in an array, you don't have to use jQuery to sum them. You can use methods already present on the array object to do the work.

Arrays have a .reduce() method. Documentation: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/Reduce

Array.reduce accepts a function as an argument that acts as an accumulator callback. The accumulator function accepts 4 arguments (previousValue, currentValue, index, array). You only need 2 of them to sum. Those 2 arguments are previousValue and currentValue.

var sampleArray = [1, 2, 3, 4, 5];
var sum = sampleArray.reduce(function(previousValue, currentValue){
    return currentValue + previousValue;
});

If you are faced with a compatibility issue where the target environment doesn't support ECMAScript 5 or above additions, use the prototype definition defined in the MDN article linked. (Appended below)

if (!Array.prototype.reduce) {
    Array.prototype.reduce = function reduce(accumulator){
    if (this===null || this===undefined) throw new TypeError("Object is null or undefined");
    var i = 0, l = this.length >> 0, curr;
    if(typeof accumulator !== "function") // ES5 : "If IsCallable(callbackfn) is false, throw a TypeError exception."
        throw new TypeError("First argument is not callable");
    if(arguments.length < 2) {
        if (l === 0) throw new TypeError("Array length is 0 and no second argument");
        curr = this[0];
        i = 1; // start accumulating at the second element
    }
    else
        curr = arguments[1];
    while (i < l) {
        if(i in this) curr = accumulator.call(undefined, curr, this[i], i, this);
        ++i;
    }
    return curr;
    };
}

Upvotes: 40

JJ.
JJ.

Reputation: 5475

Change your HTML to use class instead of id (id must be unique):

<td>
    <input type="text" 
        style="width: 60px; background: none repeat scroll 0% 0% rgb(255, 255, 255);" maxlength="4" 
        class="unitprice" name="unitprice[]">
</td>
<td>
    <input type="text" 
        style="width: 60px; background: none repeat scroll 0% 0% rgb(255, 255, 255);"
            maxlength="4" class="unitprice" name="unitprice[]">
</td>

Then you can total via JavaScript (using jQuery .each() function):

var totalUnitPrice = 0;

$('.unitprice').each(function(index) {
    totalUnitPrice += parseInt($(this).val()); // parse the value to an Integer (otherwise it'll be concatenated as string) or use parseFloat for decimals
  });

Upvotes: 5

Paul
Paul

Reputation: 141917

function getSum(){
    var ups = document.getElementsByName('unitprice[]'), sum = 0, i;
    for(i = ups.length; i--;)
        if(ups[i].value)
            sum += parseInt(ups[i].value, 10);
    return sum;
}

Upvotes: 2

nobody
nobody

Reputation: 10645

Give your <input>s unique ids like this:

<input type="text" id="unitprice_1">
<input type="text" id="unitprice_2">
<input type="text" id="unitprice_3">

Then compute the sum:

var i = 1;
var sum = 0;
var input;
while( ( input = document.getElementById( 'unitprice_'+i ) ) !== null ) {
    sum += parseInt( input.value );
    ++i;
}
alert( sum );

Upvotes: 0

Related Questions