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>
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;
};
}
var sum = sampleArray.reduce((e, i) => e + i)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
});
var sum = arr.reduce(function(a, b) { return a + b; }, 0); is faster than jQuery's each().
var sum = reduce((a, b)=>a + b, 0);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;
}
for loop as for(i = ups.length; i--;)
//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;
}
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 );
classattributes instead ofidattributes. (You cannot have more then one element with the same ID on the page.)<input type="text" unitpricemarker="" name="unitprice"/>You can now select all such fields using jQuery -$('input[unitpricemarker]').