Jump to content
kpcollier

Make JS Work With Empty Fields

Recommended Posts

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);

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...