Question

Subtract 2 fields in Forms

Forms

Updated December 17, 2014

asked on December 17, 2014

I have a form in which I need to subtract two fields, then enter the difference into a third field. I have tried the following code which was suggested from an earlier post, which suggested using the example from the help file and make a change to a line of the code. However, the results that I am getting are the two fields are simply added together 3 times and given a negative sign. I have included a screenshot of the form below. I am wanting to subtract the "Reading" field from the "Processed Reading" field. The "Reading" field is entered by the user and the "Processed Reading" is populated from a table lookup from our billing application based on the meter number entered. As per the instructions from the help file, I have added "sum" to the CSS class under the advanced tab for each of the two fields and "total" to the CSS class of the variance field. As a side note.... Does anyone know how to remove the comma from the numbers to that it would display as 59100 instead of 59,100?

$(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; }
});

0 0

Answer

SELECTED ANSWER

replied on December 17, 2014

I was able to achieve the calculation using the following code:

$(document).ready(function () { 
  $('#q2 input, #q5 input').blur(function () {
    $('#q7 input').val($('#q2 input').val() - $('#q5 input').val());
  });
});

1 0

Replies

replied on December 17, 2014 • Show version history

The way your code works currently, it will loop over all fields with the "sum" CSS class, and it will cumulatively subtract all of them. It sets the variable s to zero, and then "-=" will subtract whatever value is specified on that line (s-=x is the same as s=s-x). Not sure why it's grabbing 3 copies of your number given how you described your setup...

What I would recommend is changing your setup around a bit. Give both your calculation input fields a CSS class like "CalcInput" and also give them each a unique CSS class like "Reading" and "ProcessedReading" You can keep the output field labeled as "Total"

Then try to explicitly code your calculation like this:

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

As for the formatting, I don't know. I think I've seen someone have a similar issue on here before. I believe it may have been browser specific?

0 0

replied on December 17, 2014

Scott, Thank you for your reply. I do however have a final question if I am reading you reply correctly. How do I apply two CSS classes to the Reading and Processed Reading fields?

0 0

replied on December 17, 2014 • Show version history

In the CSS classes box, just add them both, separated by a space: "CalcInput Reading"

Also, I had some small errors in my previous code listing... I just corrected them.

0 0

You are not allowed to follow up in this post.

Question

Question

Subtract 2 fields in Forms

Answer

Replies

Sign in to reply to this post.