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

Question

Question

Calculate the difference between two fields in a table row in Forms 9.3

Forms
Updated December 30, 2015
asked on December 30, 2015

I need help troubleshooting the code I got from another answer on this site, and tried to use in my form.  I need to calculate the difference between two fields in a table row.  The value I'm getting in the total field is "NaN."  Below is an image of the table, and the code I used.  Thank you for your help!!!

CSS Class in the "This Travel Time" field is CalcInput Trip

CSS Class in the "Normal Travel Time" field is CalcInput Normal

CSS Class in the "Net Travel Time" field is Total

$(document).ready(function () {
   $('.CalcInput').on('blur', 'input', calctotal);
   function calctotal() {
      var s = parseNumber($('.Trip input').val())-parseNumber($('.Normal input').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;
   }
});

 

0 0

Answer

SELECTED ANSWER
replied on December 30, 2015

For the class names did you put the actual string "CalcInput Trip" for example into the CSS class field for the "This Travel Time" form field? If so, to use the above code as is, assign the class "CalcInput" to the table (not any fields). Alternatively, replace ".CalcInput" everywhere in the JavaScript above with "#q34".

I think either of those should resolve the issue.

3 0

Replies

replied on December 30, 2015

Hi Deborah, 

In line #8 of your code, "return isNaN(f)..." should be on a new line. Everything after "//" on the same line is read as a comment and not part of the code. The parseNumber function should look like:

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

Let me know if this works for you!

1 0
replied on December 30, 2015

This works perfectly, but only for the first row in the table.

 

I tried replacing it with the code provided by James, but it didn't result in a value.

0 0
replied on December 30, 2015

Hello Deborah,

Even after Alexander's observation above, your code won't work exactly right. If you have multiple rows, the Net Travel Time column will always display the results of the first row, not the current row. The following JavaScript can replace your calctotal function:

function calctotal() {
	$('.CalcInput tbody tr').each(function () {
		trip = parseNumber($(this).find('.Trip input').val());
		normal = parseNumber($(this).find('.Normal input').val());
		$(this).find('.Total input').val(trip - normal);
	});
}

Then the calculations should work as expected (including Alexander's edit to the parseNumber code as written).

Hope this helps!

1 0
replied on December 30, 2015

You're right about the multiple rows.  I replaced the whole code with the one you provided, but it didn't work.  Was I only supposed to replace part of the code?  I'm not good with scripting.  Sorry!

0 0
replied on December 30, 2015 • Show version history

Hi Deborah,

In your original post, lines 3-6 contain your "calctotal" function. You would need to replace lines 3-6 with James' code above.

2 0
replied on December 30, 2015

I tried adjusting the parseNumber function and replacing the calctotal function, but I'm not getting a value in any row now.  Below is the entire code I used.

$(document).ready(function () {
   $('.CalcInput').on('blur', 'input', calctotal);
   function calctotal() {
	$('.CalcInput tbody tr').each(function () {
		trip = parseNumber($(this).find('.Trip input').val());
		normal = parseNumber($(this).find('.Normal input').val());
		$(this).find('.Total input').val(trip - normal);
	});
}
   function parseNumber(n) {
      var f = parseFloat(n); //Convert to float number. 
     return isNaN(f) ? 0 : f; //treat invalid input as 0;
   }
});

 

0 0
View 1 previous reply
replied on December 30, 2015 • Show version history

Could you attach a screenshot of the CSS classes for the form (i.e. from the Custom CSS/JavaScript tab view) for the table being used? I am wondering if I was misunderstanding your class setup; on my reproduction of your fields the above code works for me.

0 0
replied on December 30, 2015

Below is the screenshot of the CSS classes for the whole form.  The ID of the table that contains the fields to be calculated is q34.  I entered the class names in the Advanced tab of the Field Options for each column.

0 0
SELECTED ANSWER
replied on December 30, 2015

For the class names did you put the actual string "CalcInput Trip" for example into the CSS class field for the "This Travel Time" form field? If so, to use the above code as is, assign the class "CalcInput" to the table (not any fields). Alternatively, replace ".CalcInput" everywhere in the JavaScript above with "#q34".

I think either of those should resolve the issue.

3 0
replied on December 30, 2015

Yes, assigning the CalcInput class to the table, and removing CalcInput from the individual fields worked.  All rows are calculating correctly in the Net Travel Time field.  Thank you!!!

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

Sign in to reply to this post.

Details
Related Posts
Loading ...