Make JS Work With Empty Fields

[kpcollier]

Excuse the long ugly script. There is definitely a better way to write this out I am sure, but this is what I have for now.

When all of the fields have a value, this script works. However, the Labor_Totals are all showing 'NaN' until each and every field in the script has a value. At the end, the Labor_SubTotal shows 'NaN' until every field has a value as well. We will very rarely use all of these Labor fields - but I need them there just in case.

How can I get this script to work with only the fields that have values in them?

function calculate()
{
var labrA = parseFloat(document.getElementById("InsertRecordLabor1_Rate").value);
    
var labhA = parseFloat(document.getElementById("InsertRecordLabor1_Hours").value);

var labrB = parseFloat(document.getElementById("InsertRecordLabor2_Rate").value);
    
var labhB = parseFloat(document.getElementById("InsertRecordLabor2_Hours").value);

var labrC = parseFloat(document.getElementById("InsertRecordLabor3_Rate").value);
    
var labhC = parseFloat(document.getElementById("InsertRecordLabor3_Hours").value);

var labrD = parseFloat(document.getElementById("InsertRecordLabor4_Rate").value);
    
var labhD = parseFloat(document.getElementById("InsertRecordLabor4_Hours").value);

var labrE = parseFloat(document.getElementById("InsertRecordLabor5_Rate").value);
    
var labhE = parseFloat(document.getElementById("InsertRecordLabor5_Hours").value);

var labrF = parseFloat(document.getElementById("InsertRecordLabor6_Rate").value);
    
var labhF = parseFloat(document.getElementById("InsertRecordLabor6_Hours").value);

var labrG = parseFloat(document.getElementById("InsertRecordLabor7_Rate").value);
    
var labhG = parseFloat(document.getElementById("InsertRecordLabor7_Hours").value);

var labrH = parseFloat(document.getElementById("InsertRecordLabor8_Rate").value);
    
var labhH = parseFloat(document.getElementById("InsertRecordLabor8_Hours").value);

var labrI = parseFloat(document.getElementById("InsertRecordLabor9_Rate").value);
    
var labhI = parseFloat(document.getElementById("InsertRecordLabor9_Hours").value);
  
var labrJ = parseFloat(document.getElementById("InsertRecordLabor10_Rate").value);
    
var labhJ = parseFloat(document.getElementById("InsertRecordLabor10_Hours").value);
  
var labrK = parseFloat(document.getElementById("InsertRecordLabor11_Rate").value);
    
var labhK = parseFloat(document.getElementById("InsertRecordLabor11_Hours").value);
  
var labrL = parseFloat(document.getElementById("InsertRecordLabor12_Rate").value);
    
var labhL = parseFloat(document.getElementById("InsertRecordLabor12_Hours").value);
  
var labrM = parseFloat(document.getElementById("InsertRecordLabor13_Rate").value);
    
var labhM = parseFloat(document.getElementById("InsertRecordLabor13_Hours").value);
  
var labrN = parseFloat(document.getElementById("InsertRecordLabor14_Rate").value);
    
var labhN = parseFloat(document.getElementById("InsertRecordLabor14_Hours").value);
  
var labrO = parseFloat(document.getElementById("InsertRecordLabor15_Rate").value);
    
var labhO = parseFloat(document.getElementById("InsertRecordLabor15_Hours").value);
  
  

var labT1 = document.getElementById("InsertRecordLabor1_Total").value = (labrA) * (labhA);
var labT2 = document.getElementById("InsertRecordLabor2_Total").value = (labrB) * (labhB);
var labT3 = document.getElementById("InsertRecordLabor3_Total").value = (labrC) * (labhC);
var labT4 = document.getElementById("InsertRecordLabor4_Total").value = (labrD) * (labhD);
var labT5 = document.getElementById("InsertRecordLabor5_Total").value = (labrE) * (labhE);
var labT6 = document.getElementById("InsertRecordLabor6_Total").value = (labrF) * (labhF);
var labT7 = document.getElementById("InsertRecordLabor7_Total").value = (labrG) * (labhG);
var labT8 = document.getElementById("InsertRecordLabor8_Total").value = (labrH) * (labhH);
var labT9 = document.getElementById("InsertRecordLabor9_Total").value = (labrI) * (labhI);
var labT10 = document.getElementById("InsertRecordLabor10_Total").value = (labrJ) * (labhJ);
var labT11 = document.getElementById("InsertRecordLabor11_Total").value = (labrK) * (labhK);
var labT12 = document.getElementById("InsertRecordLabor12_Total").value = (labrL) * (labhL);
var labT13 = document.getElementById("InsertRecordLabor13_Total").value = (labrM) * (labhM);
var labT14 = document.getElementById("InsertRecordLabor14_Total").value = (labrN) * (labhN);
var labT15 = document.getElementById("InsertRecordLabor15_Total").value = (labrO) * (labhO);
  
document.getElementById("InsertRecordLabor_SubTotal").value = (labT1) + (labT2) + (labT3) + (labT4) + (labT5) + (labT6) + (labT7) + (labT8) + (labT9) + (labT10) + (labT11) + (labT12) + (labT13) + (labT14) + (labT15);

}

document.getElementById("InsertRecordLabor1_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor1_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor2_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor2_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor3_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor3_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor4_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor4_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor5_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor5_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor6_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor6_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor7_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor7_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor8_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor8_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor9_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor9_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor10_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor10_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor11_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor11_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor12_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor12_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor13_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor13_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor14_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor14_Rate").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor15_Hours").addEventListener("keyup", calculate);
document.getElementById("InsertRecordLabor15_Rate").addEventListener("keyup", calculate);

 

[Vitalikssssss]

Hi @kpcollier,

Try this code:
 

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {

let v_fields = ["Labor1_Rate", "Labor1_Hours", "Labor2_Rate", "Labor2_Hours", "Labor3_Rate","Labor3_Hours",
"Labor4_Rate", "Labor4_Hours", "Labor5_Rate", "Labor5_Hours", "Labor6_Rate", "Labor6_Hours", "Labor7_Rate", "Labor7_Hours",
"Labor8_Rate", "Labor8_Hours", "Labor9_Rate", "Labor9_Hours", "Labor10_Rate", "Labor10_Hours", "Labor11_Rate", "Labor11_Hours",
"Labor12_Rate", "Labor12_Hours", "Labor13_Rate", "Labor13_Hours", "Labor14_Rate", "Labor14_Hours", "Labor15_Rate", "Labor15_Hours",
]; 

let t_field = ["Labor1_Total", "Labor2_Total", "Labor3_Total", "Labor4_Total", "Labor5_Total", "Labor6_Total", 
                "Labor7_Total", "Labor8_Total", "Labor9_Total", "Labor10_Total", "Labor11_Total", "Labor12_Total",
                "Labor13_Total", "Labor14_Total", "Labor15_Total",]; 

let sub_total = document.getElementById("InsertRecordLabor_SubTotal");

sub_total.value = 0;

let v_state = [];

let t_state = [];

v_fields.forEach(function(el) {

    if (el !== null) {
            v_state.push(document.getElementById("InsertRecord"+el));
    }
 });

v_state.forEach(function(el){
    if (el !== null) {
            el.addEventListener("keyup", calculate);
            

    }
});

t_field.forEach(function(el) {

   if (el !== null) {
           t_state.push(document.getElementById("InsertRecord"+el));
   }
});


function calculate() {

    let i = 0;

    t_state.forEach(element => { 

        if (element !== null) {
            
            element.value = ((!isNaN(v_state[i].value)) ? v_state[i].value : 0) *
            
                        ((!isNaN(v_state[i+1].value)) ? v_state[i+1].value : 0);
            
                        sub_total.value = +sub_total.value + +element.value;
                        console.log(sub_total.value);
            i+=2;
    }
    
        
    });
}



});

</script>

 

This code should resolve the issue.

Regards,

Vitalikssssss

[kpcollier]

Haha, wow. Your code looks SO nice, specially compared to the way I did it. Thank you @Vitalikssssss it works great.

[Vitalikssssss]

@kpcollier, I am glad that my suggestions helped.

Regards,

vitalikssssss

[kpcollier]

Hey @Vitalikssssss, maybe you can help me out. When using this workflow, it works great if you do not make any mistakes entering in the values. However, if you enter in a value in Hours or in Rate, and then backspace to change it, the 'SubTotal' adds the previously inputted value with the newly inputted value. 

Sorry, it is hard to explain. But, say I start with 2 in Hours and 5 in Rate. The subtotal is 10, like it should be. But, if I change Rate from 5 to 6, it adds the 5 to the total and then the 6 to the total as well. So, changing 2 Hours 5 Rate (=10) to 2 Hours 6 Rate (=12) shows a subtotal of 22 (10 + 12), which should be just 12.

[kpcollier]

I think it may have something to do with KeyUp event listener. Looking at the Console when typing in values leads me to think this. When I type in 1 for Hour and 10 for Rate, the Subtotal shows 11. Which, is because before I could type in the second 1 for 11, it added the first 1 to the subtotal. Making it 11. I believe this is also calculating when backspace is pressed. Also, it doesn't set back to null when the element value is empty. 

I have tried changing the event listener to input, and subtotal still isn't updating on deleted values. I am now trying to figure out if the subtotal event is being called on every input or not.

[Vitalikssssss]

Hi @kpcollier,

Indeed there was a case which I did not think through.

Here is a code which should resolve the issue:

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {

let v_fields = ["Labor1_Rate", "Labor1_Hours", "Labor2_Rate", "Labor2_Hours", "Labor3_Rate","Labor3_Hours",
"Labor4_Rate", "Labor4_Hours", "Labor5_Rate", "Labor5_Hours", "Labor6_Rate", "Labor6_Hours", "Labor7_Rate", "Labor7_Hours",
"Labor8_Rate", "Labor8_Hours", "Labor9_Rate", "Labor9_Hours", "Labor10_Rate", "Labor10_Hours", "Labor11_Rate", "Labor11_Hours",
"Labor12_Rate", "Labor12_Hours", "Labor13_Rate", "Labor13_Hours", "Labor14_Rate", "Labor14_Hours", "Labor15_Rate", "Labor15_Hours",
]; 

let t_field = ["Labor1_Total", "Labor2_Total", "Labor3_Total", "Labor4_Total", "Labor5_Total", "Labor6_Total", 
                "Labor7_Total", "Labor8_Total", "Labor9_Total", "Labor10_Total", "Labor11_Total", "Labor12_Total",
                "Labor13_Total", "Labor14_Total", "Labor15_Total",]; 

let sub_total = document.getElementById("InsertRecordLabor_SubTotal");

sub_total.value = 0;

let v_state = [];

let t_state = [];

v_fields.forEach(function(el) {

    if (el !== null) {
            v_state.push(document.getElementById("InsertRecord"+el));
    }
 });

v_state.forEach(function(el){
    if (el !== null) {
            el.addEventListener("keyup", calculate);
            

    }
});

t_field.forEach(function(el) {

   if (el !== null) {
           t_state.push(document.getElementById("InsertRecord"+el));
   }
});

function calc_total(){
    sub_total.value = 0;
    t_state.forEach(element => { 
        if (element !== null) {
        sub_total.value = +sub_total.value + +element.value;
        }
    });

}



function calculate() {

    let i = 0;

    t_state.forEach(element => { 

        if (element !== null) {
            
            element.value = ((!isNaN(v_state[i].value)) ? v_state[i].value : 0) *
            
                        ((!isNaN(v_state[i+1].value)) ? v_state[i+1].value : 0);
            
            i+=2;
    }
    
        
    });
}

setInterval(calc_total, 2000);


});

</script>

Regards,

vitalikssssss