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

Question

Question

Calculating total from table

Forms
Updated September 9, 2015
asked on September 11, 2014

We are using the following code to add rows in a table.  We have the ccs class of sum entered on the table.  However, this adds any value that has a number in it.

 

$(document).ready(function () {
    $('.sum').on('blur', 'input', sumtotal);
    function sumtotal() {
        var s = 0;
        $('.sum input').each(function () {
            s += parseNumber($(this).val());
        });
        $('.total input').val(s);
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});
    

We also tried setting the column css class to sum for the appropriate column and this will add correctly for the first row but subsequent rows will not be added to the total unless we go back and change the value in the first row.  Is there something we need to change in the code?

 

Thanks, 

1 0

Answers

APPROVED ANSWER
replied on September 15, 2014

Here's a better way:

 

You were using a code sample I made without tables in mind. Here's the updated version that works regardless of whether the .sum fields are inside a table.
 

$(document).ready(function () {
    $(document).on('blur change', '.sum input', sumtotal);
  
	function sumtotal() {
	    var s = 0;
		$('.sum input').each(function () {
		    s += parseNumber($(this).val());
		});
		$('.total input').val(s);
	}
	function parseNumber(n) {
	    var f = parseFloat(n); //Convert to float number.
		return isNaN(f) ? 0 : f; //treat invalid input as 0;
	}
});

 

1 0
SELECTED ANSWER
replied on September 12, 2014 • Show version history

Try this: I have tested it to work for me

$(function() {
  $(document).ready(function () {
    
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
    function sumtotal() {
        var s = 0;
        $('.sum input').each(function () {
            s += parseNumber($(this).val());
        });
        $('.total input').val(s);
    }
    $('.cf-table-block').change(sumtotal);
  });
});

The reason this works is you were using the wrong example from the help/support documentation for javascript on forms. You were using the wrong event handler so it only worked on the first field but not for the others. By checking for a change to the table, we include all fields, but the result is still valuable and not overly intensive so it is perfectly okay to do it this way.

1 0

Replies

replied on September 11, 2014

See this topic for help. I used the code in this answer to handle the same situation in a form I created. smiley

1 0
replied on September 11, 2014 • Show version history

I think you are applying the "sum" value to the table instead of the particular column. The way you have it in the below half of your post is the correct way. I am not quite sure why this does not work for when you change subsequent fields in that column.

 

Can you post a screenshot of the table in the CSS / Javascript page to identify what changes might also need to be made. 

 

Is the total field inside the table? Also, make sure to remove the "sum" class from the table itself and only have it on the specific column it is a part of. 

 

Maybe try changing the following:

 $('.sum').on('blur', 'input', sumtotal);

to this:

$('.sum').on('blur change','input',sumtotal);

 

0 0
replied on September 12, 2014

Hi Keith,

The total field is not inside the table. I removed the css class of "sum" from the table and applied it to just the desired column.  I also made your suggestion to the code change but that did not resolve the issue.  This will add correctly for the first row but subsequent rows will not be added to the total unless we go back and change the value in the first row.

 

Thanks,
Jen

0 0
View 4 previous replies
SELECTED ANSWER
replied on September 12, 2014 • Show version history

Try this: I have tested it to work for me

$(function() {
  $(document).ready(function () {
    
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
    function sumtotal() {
        var s = 0;
        $('.sum input').each(function () {
            s += parseNumber($(this).val());
        });
        $('.total input').val(s);
    }
    $('.cf-table-block').change(sumtotal);
  });
});

The reason this works is you were using the wrong example from the help/support documentation for javascript on forms. You were using the wrong event handler so it only worked on the first field but not for the others. By checking for a change to the table, we include all fields, but the result is still valuable and not overly intensive so it is perfectly okay to do it this way.

1 0
replied on September 12, 2014

That worked great. Thanks, Keith!

0 0
APPROVED ANSWER
replied on September 15, 2014

Here's a better way:

 

You were using a code sample I made without tables in mind. Here's the updated version that works regardless of whether the .sum fields are inside a table.
 

$(document).ready(function () {
    $(document).on('blur change', '.sum input', sumtotal);
  
	function sumtotal() {
	    var s = 0;
		$('.sum input').each(function () {
		    s += parseNumber($(this).val());
		});
		$('.total input').val(s);
	}
	function parseNumber(n) {
	    var f = parseFloat(n); //Convert to float number.
		return isNaN(f) ? 0 : f; //treat invalid input as 0;
	}
});

 

1 0
replied on September 16, 2014

That works great.  Thanks, Eric!

0 0
replied on September 8, 2015

Eric,

When I tried using your javacode provided, everytime I add a number it does a multiplication instead of addition.  Is there anything I should look for to prevent this?

 

$(document).ready(function () {
    $(document).on('blur change', '.sum2 input', sumtotal);
  
	function sumtotal() {
	    var s = 0;
		$('.sum2 input').each(function () {
		    s += parseNumber($(this).val());
		});
		$('.total2 input').val(s);
	}
	function parseNumber(n) {
	    var f = parseFloat(n); //Convert to float number.
		return isNaN(f) ? 0 : f; //treat invalid input as 0;
	}
});

 

0 0
replied on September 8, 2015

Try the suggestion from this thread. Instead of

$('.sum2 input').each(function () {

use

$('.sum2 input').filter(':visible').each(function () {

1 0
replied on September 9, 2015

Thanks Alex, 

I wasn't aware that IE11 handles this java code differently vs other browsers or older version of IEs.

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

Sign in to reply to this post.

Details
Related Posts
Loading ...