Question

How to use javascript to format Currency Fields

Forms Version 10

Updated March 27, 2018

asked on April 26, 2016

You may have noticed that Currency fields in Forms 10 do not display in the traditional currency format of $0.00.

Instead it only shows the values in shortened form ie: $2.90 displays as $2.9

Can somebody provide the required javascript to properly format the currency fields in a form.

Thanks

1 0

Replies

replied on September 1, 2016

As the calculations can now all be completed in forms,

Until LF makes the changes to the currency formatting, I found this to be easier workaround.

Use a Number field instead of a currency field. Make a CSS Class (moneyclass)

Use this JS to prepend a $ to the front of the field. Looks the same as a Currency field

$(document).ready(function() {

$('.moneyclass[attrtype="number"] .cf-field').prepend('<span class="margin-end">$</span>');

});

1 0

replied on March 27, 2018

I used the above java Steve Knowlton provided to put a $ in front of a number field in a collection. The dollar symbol appears on the first collection when the form is loaded, but not when the user on adds additional sets of the collection. How could I modify the script to work within a collection to have the $ appear every time a user adds a set?

0 0

replied on April 26, 2016

Give your currency fields a CSS class name like twodecimals. Then you can use JS like

$(document).ready (function () {

  $('.twodecimals input').on('change', function() {
    $(this).val(parseNumber($(this).val()).toFixed(2));
  });
  
  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 April 26, 2016

This works well for items not in a table. For the table, the first Row is formatted as expect but any dynamically added Rows the formatting was not applied as you can see below. Is there something more that needs to be added to account for Fields in a Table?

0 0

replied on April 26, 2016

Here's an example

$(document).ready(function () {
  $('.cf-table-block').on('blur', 'input', calculate);

  function calculate() {
    $('.cf-table-block tbody tr').each(function () {
      var s = 0;
      var x = 0;
      s = parseNumber($(this).find('.price input').val()) * parseNumber($(this).find('.quantity input').val());
      x = parseNumber($(this).find('.price input').val());
      $(this).find('.subtotal input').val(s.toFixed(2));
      $(this).find('.price input').val(x.toFixed(2));
    });
  }

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

Give the columns the appropriate CSS class names for price, quantity, and subtotal.

0 0

replied on April 27, 2016

Thanks Alexander

I was not looking for the JavaScript to perform the math calculations as I'm using the built in features of Forms 10.1 to perform this.

I would just like to have the JS script to format the currency cells to have the 2 fixed decimals in a table.

(Hopefully LF makes a permanent fix for this soon in a future patch so not to have to rely on JS to perform this formatting)

0 0

replied on April 27, 2016 • Show version history

You can just change

s = parseNumber($(this).find('.price input').val()) * parseNumber($(this).find('.quantity input').val());

s = parseNumber($(this).find('.subtotal input').val());

If you don't want the JS to do any calculation for you. However, the remaining JS would stay the same. Anytime there's a blur event in the table, it will use toFixed(2) on the subtotal and price fields for each row.

0 0

You are not allowed to follow up in this post.

Question

Question

How to use javascript to format Currency Fields

Replies

Sign in to reply to this post.