You are viewing limited content. For full access, please sign in.

Question

Question

Change the value in a total field when a drop down is changed in a table

Forms Version 9
Updated September 5, 2014
asked on September 4, 2014

 I have set up a custom script calculates a total in one of three fields based on a dropdown in a table. The issue I have is if I go back and change a dropdown value it will add the sub total of that row to the appropriate field but does not subtract the subtotal of the row from the old total field. I can not think of how to accomplish this and would appreciate any help.

$(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    function sumtotal() {
        var total1 = 0;
	var total2 = 0;
  	var total3 = 0;
  $('.cf-table-block tbody tr').each(function () {
            var s = 0;
   var timeS = 0;
   var timeE = 0;
            $(this).find('.timeSTART input').each(function () {
                timeS = parseNumber($(this).val());
            });
            $(this).find('.timeEND input').each(function () {
                timeE = parseNumber($(this).val());
            });
   s = timeE - timeS
            $(this).find('.subtotal input').val(s);
   if ($(this).find('.timeTYPE option:selected').val() === "Type1"){
    total1 += s;
    $('.totalTYPE1 input').val(total1);
    }
   else if ($(this).find('.timeTYPE option:selected').val() === "Type2"){
    total2 += s;
    $('.totalTYPE2 input').val(total2);
    }
   else if ($(this).find('.timeTYPE option:selected').val() === "Type3"){
    total3 += s;
    $('.totalTYPE3 input').val(total3);
    }
   });
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});
0 0

Answer

SELECTED ANSWER
replied on September 5, 2014 • Show version history

I think I figured it out, but that is with making an assumption.

 

So basically, it appears as though the subtotals for the type are actually 3 additional columns in the row for the table?

 

In that case, do the value definition at the end.

$(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    function sumtotal() {
        var total1 = 0;
	var total2 = 0;
  	var total3 = 0;
  $('.cf-table-block tbody tr').each(function () {
            var s = 0;
   var timeS = 0;
   var timeE = 0;
            $(this).find('.timeSTART input').each(function () {
                timeS = parseNumber($(this).val());
            });
            $(this).find('.timeEND input').each(function () {
                timeE = parseNumber($(this).val());
            });
   s = timeE - timeS;
            $(this).find('.subtotal input').val(s);
   if ($(this).find('.timeTYPE option:selected').val() === "Type1"){
    total1 += s;
    }
   else if ($(this).find('.timeTYPE option:selected').val() === "Type2"){
    total2 += s;
    }
   else if ($(this).find('.timeTYPE option:selected').val() === "Type3"){
    total3 += s;
    }

    $('.totalTYPE1 input').val(total1);
    $('.totalTYPE2 input').val(total2);
    $('.totalTYPE3 input').val(total3);

   });
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

This way, the if else statements just adjust the totals based on the changes to that row, but the row will always have the values reset for all the types since we may have had someone change the type. 

 

BTW: If you want to actually have the rows add up as it goes along, instead of all having the same value, try this:

$(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    function sumtotal() {
        var total1 = 0;
	var total2 = 0;
  	var total3 = 0;
  $('.cf-table-block tbody tr').each(function () {
            var s = 0;
   var timeS = 0;
   var timeE = 0;
            $(this).find('.timeSTART input').each(function () {
                timeS = parseNumber($(this).val());
            });
            $(this).find('.timeEND input').each(function () {
                timeE = parseNumber($(this).val());
            });
   s = timeE - timeS;
            $(this).find('.subtotal input').val(s);
   if ($(this).find('.timeTYPE option:selected').val() === "Type1"){
    total1 += s;
    }
   else if ($(this).find('.timeTYPE option:selected').val() === "Type2"){
    total2 += s;
    }
   else if ($(this).find('.timeTYPE option:selected').val() === "Type3"){
    total3 += s;
    }

    $(this).find('.totalTYPE1 input').val(total1);
    $(this).find('.totalTYPE2 input').val(total2);
    $(this).find('.totalTYPE3 input').val(total3);

   });
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

Lastly, to speed things up slightly:

 

$(function () {
  $(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    function sumtotal() {
        var total1 = 0;
	    var total2 = 0;
  	    var total3 = 0;
        $('.cf-table-block tbody tr').each(function () {
           var s = 0;
           var timeS = 0;
           var timeE = 0;
           timeS = parseNumber($(this).find('.timeSTART input').val());
           timeE = parseNumber($(this).find('.timeEND input').val());
           s = timeE - timeS;
           $(this).find('.subtotal input').val(s);
           var testTYPE = $(this).find('.timeTYPE option:selected').val(); 
           if (testTYPE === "Type1"){
              total1 += s;
           }
           else if (testTYPE === "Type2"){
              total2 += s;
           }
           else if (testTYPE === "Type3"){
              total3 += s;
           }
           // Comment out the below three lines and uncomment the 3 lines following them to 
           //    have the Type Totals appear as they originally did in the code you provided
           $(this).find('.totalTYPE1 input').val(total1);
           $(this).find('.totalTYPE2 input').val(total2);
           $(this).find('.totalTYPE3 input').val(total3);
           //$('.totalTYPE1 input').val(total1);
           //$('.totalTYPE2 input').val(total2);
           //$('.totalTYPE3 input').val(total3);

       });
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});
});

 

0 0

Replies

replied on September 5, 2014

Can you clarify? maybe a picture would help of the fields. 

 

It seems you are using the .timeSTART and .timeEND as values for the calculation, and the .timeTYPE as the dropdown. If I understand correctly, .timeTYPE can have 3 different values, and each one indicates which total to add the value to. 

 

.totalTYPE1, .totalTYPE2, and .totalTYPE3 are the total fields. If all this is true, I guess without running it I am confused why you need to use ".each" for the timeSTART and .timeEND as you are already iterating through the rows. 

 

I will try setting up this code and seeing the results. 

 

BTW, line 17 should probably have a semi-colon at the end

0 0
replied on September 5, 2014

Thank you for the response. I unfortunately  have not had the opportunity  to try them out but will do it as soon as I can but it looks like this may do the trick

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...