Question

Format currency with thousands separator and decimal spaces, and calculate difference between two fields in Forms 9.1

Forms

Updated July 21, 2015

asked on July 15, 2015

Hi All,

I hope somebody can help me with the scripting, because I'm having trouble following various examples I've located. I need to format these three currency fields with a comma for a thousands separator, and two decimal spaces, and I also need to calculate the difference between the first two fields "current" and "limit," and add that amount to the field with the class label "difference." I appreciate any guidance that can be provided. Thank you!

Form.docx (24.33 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on July 15, 2015 • Show version history

Ooops, sorry.

Replace the sumtotal function above with the one below:

  function sumtotal() {
    var s = parseNumber($('#q5 input').val()) - parseNumber($('#q4 input').val());
    $('#q10 input').val(s.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
  }

You can also rename the function to something else (like "calculateDifference") so it's easier to read by others. If you do that, remember to change it online 21 too.

1 0

Replies

replied on July 15, 2015

Please see this thread which covers how to accomplish this.

0 0

replied on July 15, 2015

Thank you Alexander. Yours was one of the examples I located with my search and tried to follow. I couldn't get it to work with my fields.

0 0

replied on July 15, 2015 • Show version history

You can follow this example:

Form

The Current Branch Cash Total field uses the CSS class, commas Current

The Branch Cash Limit field uses the CSS class, commas Limit

The Amount Over Branch Case Limit field uses the CSS class, commas Difference

Here is the Javascript

$(document).ready(function () {
  
  //set Difference field to be read-only
  $('.Difference input').attr('readonly','True');
  
  //initialize currency input fields
  setfields();
  
  
  //changes input fields to allow for commas and replaces the input with the comma formatted value
  function setfields() {
    $('.commas input').attr("pattern", '^(\\d+|\\d{1,3}(,\\d{3})*)(\\.\\d{2})?$');
    $('.commas input').on("change", function () {
      $(this).val($(this).val().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
    });
  }
  
  //calculates Differnece
  $('.Current input, .Limit input').on('change', function() {
    var c = parseNumber($('.Current input').val().replace(/,/g,''));
    var l = parseNumber($('.Limit input').val().replace(/,/g,''));
    var d = c - l;
    $('.Difference input').val(d.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
  });
  
  function parseNumber(n) {
    var f = parseFloat(n); //Convert to float number.
    return isNaN(f) ? 0 : f; //treat invalid input as 0;
  }
  
});

Here's what the form looks like during submission

0 0

replied on July 15, 2015

Thank you so much for providing the Javascript! It calculates perfectly, but I'm not getting the commas in the input fields. Also, is it possible for the decimal to automatically fall into place? For example, if the user enters 65985239, it can automatically be formatted as 659,852.39? Thank you!!!

0 0

replied on July 15, 2015

Also, sometimes the result has ",000,000,001" at the end. Is there a solution for that? Thank you!!!

0 0

replied on July 15, 2015 • Show version history

Here's an alternative implementation. This one puts the commas into the input fields, puts .00 at the end of the input if the user omits it, and converts anything that's not a number to 0.00:

$(document).ready(function() {
  
  function applyCurrencyFormat(field) {
    var currentValue = parseNumber($(field).val());
    var formattedValue = currentValue.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
    $(field).val(formattedValue);
  }
  
  function removeCurrencyFormat(field) {
    var currentValue = $(field).val();
    var formattedValue = parseNumber(currentValue.replace(/,/g,'')).toFixed(2);
    $(field).val(formattedValue);
  }
  
  $('.sum input').removeAttr('pattern');
  
  $('.sum input').on('blur', function() {
    $('.sum input').each(function() {
      removeCurrencyFormat(this);
    });
    sumtotal();
    $('.sum input').each(function() {
    	applyCurrencyFormat(this);
    });
  });
  
  function sumtotal() {
    var s = 0;
    $('.sum input').each(function () {
      s += parseNumber($(this).val());
    });
    $('.total input').val(s.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
  }
  function parseNumber(n) {
    var f = parseFloat(n); //Convert to float number.
    return isNaN(f) ? 0 : f; //treat invalid input as 0;
  }
});

Below is the class setup:

0 0

replied on July 15, 2015

Formatting is perfect. Only now, the total is the sum of Amount 1 and Amount 2, instead of the difference. I'll try to figure that part out, unless you have the solution. Thank you for all your help Alexander and Ege!!!

0 0

SELECTED ANSWER

replied on July 15, 2015 • Show version history

Ooops, sorry.

Replace the sumtotal function above with the one below:

  function sumtotal() {
    var s = parseNumber($('#q5 input').val()) - parseNumber($('#q4 input').val());
    $('#q10 input').val(s.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
  }

You can also rename the function to something else (like "calculateDifference") so it's easier to read by others. If you do that, remember to change it online 21 too.

1 0

replied on July 21, 2015

Perfect!!! Thank you so much Ege!

0 0

You are not allowed to follow up in this post.

Question

Question

Format currency with thousands separator and decimal spaces, and calculate difference between two fields in Forms 9.1

Answer

Replies

Sign in to reply to this post.