Grand Total showing NaN Javascript/Jquery

Question

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..

Answer 1

you simply need to check input value next to checkbox whether its isNaN() or not
DEMO
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));

Answer 2

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.

Answer 3

I think you should use

parseInt(yourvalue);
parseFloat(yourvalue).toFixed(2);

whenever you are calculating something using js