Develop Reference

Grand Total showing NaN Javascript/Jquery

Iam working on an application, in the Grand Total field, its showing the sum of all the margin fields totals. But when the page loads its showing NaN in the total field. How can i show the existing total to show up in the Grand Total field?
This is my script.
demo
js
function getIndexedElement(item, index) {
if (item.length) {
if (index < item.length) {
return item[index];
} else {
return false;
}
} else {
if (index === 0) {
return item;
}
}
return false;
}
function isNum(value) {
return 123;
}
function calcTotals() {
var grandTotal = 0;
var margin_total = 0;
var total_inr1 = 0;
var i = 0;
while (getIndexedElement(document.forms['cart'].elements['add_percentage[]'], i)) {
add_percentageObj = getIndexedElement(document.forms['cart'].elements['add_percentage[]'], i);
addon_valueObj = getIndexedElement(document.forms['cart'].elements['addon_value[]'], i);
total_inr_valueObj = getIndexedElement(document.forms['cart'].elements['total_inr[]'], i);
totalObj = getIndexedElement(document.forms['cart'].elements['add_value[]'], i);
priceunitObj = getIndexedElement(document.forms['cart'].elements['price_unit[]'], i);
qtyObj = getIndexedElement(document.forms['cart'].elements['qty[]'], i);
marginObj = getIndexedElement(document.forms['cart'].elements['margin_for[]'], i);
if (isNaN(add_percentageObj.value)) {
add_percentageObj = '';
}
if (isNaN(addon_valueObj.value)) {
addon_valueObj = '';
}
if (add_percentageObj.value != 0) {
totalObj.value = (((total_inr_valueObj.value * 1) * add_percentageObj.value / 100) + total_inr_valueObj.value * 1).toFixed(3);
grandTotal = grandTotal + parseFloat(totalObj.value);
marginObj.value = ((totalObj.value * 1) - (total_inr_valueObj.value * 1)).toFixed(3);
margin_total = ((margin_total * 1) + marginObj.value * 1);
//total_inr1 = total_inr1 + parseFloat(total_inr_valueObj.value);
//c.value=Math.round((b.value/100) *a.value ).toFixed(2);
} else if (addon_valueObj.value != 0) {
totalObj.value = ((addon_valueObj.value * 1) + total_inr_valueObj.value * 1).toFixed(3);
grandTotal = grandTotal + parseFloat(totalObj.value);
marginObj.value = ((totalObj.value * 1) - (total_inr_valueObj.value * 1)).toFixed(3);
margin_total = ((margin_total * 1) + marginObj.value * 1);
//total_inr1 = total_inr1 + parseFloat(total_inr_valueObj.value);
} else {
totalObj.value = ((addon_valueObj.value * 1) + total_inr_valueObj.value * 1).toFixed(3);
grandTotal = grandTotal + parseFloat(totalObj.value);
marginObj.value = ((totalObj.value * 1) - (total_inr_valueObj.value * 1)).toFixed(3);
margin_total = ((margin_total * 1) + marginObj.value * 1);
//total_inr1 = total_inr1 + parseFloat(total_inr_valueObj.value);
}
i++;
}
//document.getElementById('grand_total').value = grandTotal.toFixed(3);
//document.getElementById('margin_total').value = margin_total.toFixed(3);
//document.getElementById('total_inr1').value = total_inr1.toFixed(3);
//document.getElementById('margin_for').value = margin_for;
marginTotal();
return;
}
function marginTotal() {
var x = $('[name="gt[]"]:checked').length;
if (x != 0) return;
var sum = 0;
$('input[name="margin_for[]"]').each(function () {
sum += +this.value;
});
$("#total12").val(sum);
}
$(function () {
$("input[type='checkbox'").on("change", function () {
recalcTotal();
}).change();
function recalcTotal() {
var total12 = 0;
var checkedinput = $("input:checked");
var targetcheckboxes = checkedinput.length ? checkedinput : $("input:checkbox");
targetcheckboxes.each(function () {
total12 += parseFloat($(this).next("input").val(), 10) * 1;
});
$("#total12").val(total12.toFixed(3));
}
});
$(window).load(function () {
$(document).ready(function () {
$("select").on('change', function () {
var dept_number = $(this).val();
var price = $(this).find(':selected').data('price');
var selected = $(this).find('option:selected').text();
if (selected == "INR") {
$(this).closest('table').find('.total1').val($(this).closest('table').find('.total').val());
} else {
$(this).closest('table').find('.total1').val((($(this).closest('table').find('.total').val() * price) / $(this).closest('table').find('.inrvalue').val()).toFixed(3));
}
$(this).closest('table').find('.price_unit').val(($(this).closest('table').find('.total1').val() / $(this).closest('table').find('.qty').val()).toFixed(3));
});
});
}); //]]>
In the fiddle you can see the last field, that is margin field. And extreme down you can see the Grand Total. Page Load its showing NaN..

you simply need to check input value next to checkbox whether its isNaN() or notDEMO There are many bugs like if you enter Text in Total colum you get NaN in textbox beside checkbox as well in Grandtotal since your updating it after change in input you need to validate the textbox on change
targetcheckboxes.each(function () {
var temp=$(this).next("input").val();
if(temp){
total12 += parseFloat(temp, 10) * 1;
}
});
$("#total12").val(total12.toFixed(3));

UPDATED ANSWER
So I was wrong, after some more testing its just that your first 3 readonly checkboxes don't have value=0.000 as an attribute.
As they are text inputs, javascript doesn't automatically assume that an empty input is equal to 0.
just add value=0.000 to the first three checkboxes
INCORRECT OLD ANSWER
In your targetcheckboxes.each() loop, your expression:
total12 += parseFloat($(this).next("input").val(), 10) * 1;
is causing the problem.
next("input") will match any type of input including text inputs. somewhere along the line you are concatenating a string to your total12 variable and hence the final value of total12 can not be parsed to a float.

I think you should use
parseInt(yourvalue);
parseFloat(yourvalue).toFixed(2);
whenever you are calculating something using js

Multiplying variables and showing result in a box

I'm having a problem when trying to multiply the totalPallets by the price-per-pallet ($25) and then showing that in the productSubTotal box. With the code as it is right now, the quatity total shows but when I try to get the price result, it doesn't show the operation. Also, if I try changing anythung from the code, the whole thing breaks down. I'll be thankful if anyone could help me. Thanks
// UTILITY FUNCTIONS
function IsNumeric(n) {
return !isNaN(n);
}
function calcTotalPallets() {
var totalPallets = 0;
$(".num-pallets-input").each(function() {
var thisValue = parseInt($(this).val());
if ( (IsNumeric(thisValue)) && (thisValue != '') ) {
totalPallets += parseInt(thisValue);
};
});
$("#quantitytotal").val(totalPallets);
}
function calcProdSubTotal() {
var prodSubTotal = 0;
$(".totalprice").each(function() {
var valString = parseInt(totalPallets) * multiplier;
prodSubTotal += parseInt(valString);
});
$("#product-subtotal").val(CommaFormatted(prodSubTotal));
};
// "The Math" is performed pretty much whenever anything happens in the quanity inputs
$('.num-pallets-input').bind("focus blur change keyup", function(){
// Caching the selector for efficiency
var $el = $(this);
// Grab the new quantity the user entered
var numPallets = CleanNumber($el.val());
var totalPallets = CleanNumber($el.val());
var prodSubTotal = CleanNumber($el.val());
// Find the pricing
var multiplier = $el
.parent().parent()
.find("td.price-per-pallet span")
.text();
};
// Calcuate the overal totals
calcProdSubTotal();
calcTotalPallets();
});
function CommaFormatted(amount) {
var delimiter = ",";
var i = parseInt(amount);
if(isNaN(i)) { return ''; }
i = Math.abs(i);
var minus = '';
if (i < 0) { minus = '-'; }
var n = new String(i);
var a = [];
while(n.length > 3)
{
var nn = n.substr(n.length-3);
a.unshift(nn);
n = n.substr(0,n.length-3);
}
if (n.length > 0) { a.unshift(n); }
n = a.join(delimiter);
amount = "$" + minus + n;
return amount;
}
});

Why won't my script run every time the page loads?

Here is my current code, it's a loop to type out some text automatically when my site is loaded. The issues is it is very touch and go, it only works sometimes (generally first load, not when refreshed etc.) Can someone point out the issue?
var i = 0;
var line_1 = " Understand their core goal.. Act upon the emotion..";
var line_2 = " Then..";
var line_3 = " Create your own luck!";
var all = line_1 + "{" + line_2 + "{" + line_3 + "{{";
var has = "";
var time = 100;
var hit = 0;
function myLoop () {
setTimeout(function () {
if(all.charAt(i) == "{") {
//has +1"<br>";
time = 2000;
hit++;
if(hit == 3){
document.getElementsByName('cbar')[0].placeholder = 'Enter your email address to learn more';
}
}else{
has += (all.charAt(i));
time = 100;
}
if(hit == 4){
document.getElementById('cbar').value = "";
}else{
document.getElementById('cbar').value = has;
}
if(all.charAt(i) == "{" || hit == 3){
has = "";
}
i++;
if (i < all.length) {
myLoop();
}
}, time)
}
myLoop();

Try putting your code inside window.onload = function() {//Your code here...}; It should be enough just to wrap the following:
window.onload = function() {
var i = 0;
var line_1 = " Understand their core goal.. Act upon the emotion..";
var line_2 = " Then..";
var line_3 = " Create your own luck!";
var all = line_1 + "{" + line_2 + "{" + line_3 + "{{";
var has = "";
var time = 100;
var hit = 0;
myLoop();
}
The myLoop function definition should be outside the block.

Try this:
HTML:
<body onload="myFunction()">
Javascript:
function myFunction(){
//your code here
}

Try this:
$( document ).ready(function() {
// Your code here
});
PS: This is JQuery though.

script for reporting incompatible with script for calculations

I am absolutely stumped, I have been working on this for weeks and have come to the conclusion that my knowledge is too limited to figure this out
ok, I have a page in my customer portal where employees can enter end of day sales reports. The first half of the page is input fields with dollar amounts and profits calculated by a percentage. Funny thing is it works on my website but not on jsfiddle.
the second part is a devices sold section using selects and calculations for price, cost and profit
there are 2 parts to the script and it gets crazy when I put them together, they dont work at all
I tried to post the entire page and script here but it was too long
here is the script
function Adder() {
var ppc = parseFloat(document.form.ppc.value);
var tmo = parseFloat(document.form.tmo.value);
var cf = parseFloat(document.form.cf.value);
var act = parseFloat(document.form.act.value);
var fla = parseFloat(document.form.fla.value);
var misc = parseFloat(document.form.misc.value);
var exp = parseFloat(document.form.exp.value);
var prof1 = parseFloat(document.form.prof1.value);
var prof2 = parseFloat(document.form.prof2.value);
var prof3 = parseFloat(document.form.prof3.value);
var prof4 = parseFloat(document.form.prof4.value);
var prof5 = parseFloat(document.form.prof5.value);
var result1 = ppc * 0.12;
document.form.prof1.value = result1.toFixed(2);
var result2 = tmo * 0.015;
document.form.prof2.value = result2.toFixed(2);
var result3 = cf * 0.21;
document.form.prof3.value = result3.toFixed(2);
var result4 = act * 35;
document.form.prof4.value = result4.toFixed(2);
var result5 = fla * 60;
document.form.prof5.value = result5.toFixed(2);
var result6 = ppc + tmo + cf + prof4 + prof5 + misc - exp;
document.form.sum1.value = result6.toFixed(2);
var result7 = prof1 + prof2 + prof3 + prof4 + prof5 + misc - exp;
document.form.total1.value = result7.toFixed(2);
}
var item = document.getElementById('item');
var item1 = document.getElementById('item1');
var item2 = document.getElementById('item2');
var item3 = document.getElementById('item3');
var item4 = document.getElementById('item4');
var item5 = document.getElementById('item5');
var item6 = document.getElementById('item6');
item.onchange = function () {
price.innerHTML = "$" + this.value;
cost.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty.value = 1; //Order 1 by default.
add();
};
qty.onchange = function () {
add();
};
item1.onchange = function () {
price1.innerHTML = "$" + this.value;
cost1.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty1.value = 1; //Order 1 by default.
add();
};
qty1.onchange = function () {
add();
};
item2.onchange = function () {
price2.innerHTML = "$" + this.value;
cost2.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty2.value = 1; //Order 1 by default.
add();
};
qty2.onchange = function () {
add();
};
item3.onchange = function () {
price3.innerHTML = "$" + this.value;
cost3.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty3.value = 1; //Order 1 by default.
add();
};
qty3.onchange = function () {
add();
};
item4.onchange = function () {
price4.innerHTML = "$" + this.value;
cost4.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty4.value = 1; //Order 1 by default.
add();
};
qty4.onchange = function () {
add();
};
item5.onchange = function () {
price5.innerHTML = "$" + this.value;
cost5.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty5.value = 1; //Order 1 by default.
add();
};
qty5.onchange = function () {
add();
};
item6.onchange = function () {
price6.innerHTML = "$" + this.value;
cost6.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
qty6.value = 1; //Order 1 by default.
add();
};
qty6.onchange = function () {
add();
};
function add() {
var inputs = document.getElementsByTagName('input');
var selects = document.getElementsByTagName('select');
var total = 0;
var taxes = 0;
for (var i = 0; i < selects.length; i++) {
var sum = 0;
var price = (parseFloat(selects[i].value)) ? parseFloat(selects[i].value) : 0;
var cost = (parseFloat(selects[i][selects[i].selectedIndex].getAttribute('value2'))) ? parseFloat(selects[i][selects[i].selectedIndex].getAttribute('value2')) : 0;
var qty = (parseFloat(inputs[i].value)) ? parseFloat(inputs[i].value) : 0;
sum += (price - cost) * qty;
total += sum;
if (i === 0) {
document.getElementById('result').innerHTML = "$" + sum.toFixed(2);
} else {
document.getElementById('result' + i).innerHTML = "$" + sum.toFixed(2);
}
}
document.getElementById('total').innerHTML = "$" + total.toFixed(2);
}
and the jsfiddle for everything together, I just cant figure it out

round to 2 decimal places in js invoice

i have my invoice js script done and working, but i cant figure out how to round the grand total to 2 decimal spaces.
js:
var item = document.getElementById('item');
var item1 = document.getElementById('item1');
var item2 = document.getElementById('item2');
var item3 = document.getElementById('item3');
item.onchange = function() {
price.innerHTML = "$" + this.value;
qty.value = 1; //Order 1 by default.
add();
};
qty.onchange = function() {
add();
}
item1.onchange = function() {
price1.innerHTML = "$" + this.value;
qty1.value = 1; //Order 1 by default.
add();
};
qty1.onchange = function() {
add();
}
item2.onchange = function() {
price2.innerHTML = "$" + this.value;
qty2.value = 1; //Order 1 by default.
add();
};
qty2.onchange = function() {
add();
}
item3.onchange = function () {
price3.innerHTML = "$" + this.value;
qty3.value = 1; //Order 1 by default.
add();
};
qty3.onchange = function() {
add();
}
function add() {
var inputs = document.getElementsByTagName('input');
var selects = document.getElementsByTagName('select');
var total = 0;
for (var i = 0; i < selects.length; i++) {
var sum = 0;
var price = (parseFloat(selects[i].value) )?parseFloat(selects[i].value):0;
var qty = (parseFloat(inputs[i].value) )?parseFloat(inputs[i].value):0;
sum += price * qty;
total += sum * 1.06
if(i == 0){
document.getElementById('result').innerHTML = "$" + sum;
}else{
document.getElementById('result'+i).innerHTML = "$" + sum;
}
};
document.getElementById('Total').innerHTML = "$" + total;
}
ive tried 3 or 4 methods, but due to my lack of experience with js, i just cant get right

Use:
.toFixed(2);
on the grand total
Like:
1.23898.toFixed(2); // 1.24

Do you want smt like this: 1.23756 -> 1.24 ?
Then you can use toFixed(num)
var num = 1.23756;
console.log(num.toFixed(2)); // 1.24
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

Try this:
Convert a number into a string, keeping only two decimals:
var num = 5.56789;
var n=num.toFixed(2);
The result of n will be:
5.57