FAQs

A user wanted to know how to use the jQuery maskMoney plug-in with ChronoForms v5 on Joomla! 3. This FAQ explains how to do it and is an example of the way that other similar jQuery plug-ins might be added.

The jQuery maskMoney plug-in is a simple extension that enables input masking or formatting for money fields in forms. It allows you to specify the character to be used for the decimal point or thousands separator, to add a prefix or suffix - like a $ sign and a few more useful features. See the maskMoney docs and demos for more information.

Note: ChronoForms v5 has some masks built in that you can select from the Text element settings, but these do not include 'money' masks.

The first step is to download the maskMoney JavaScript file and upload it to your site. You can put it in any convenient location. I uploaded it to a new /components/com_chronoforms5/extras/maskMoney folder.

In your form add a Text Box element in the Designer tab and give it a name and id (the id is important). I used customon to match the user's settings. 

You will also need to set the Max Length here - we'll come back to that later. For the moment click Save and Close.

In the form Setup tab drag a Load JavaScript action into the On Load event and click the Edit button.

In the JS Files box add the URL of the maskMoney JavaScript file that you uploaded. In my case this was http://my_domain.com/components/com_chronoforms5/extras/maskMoney/jquery.maskMoney.min.js (replace my_domain.com with the domain of your site).

In the JS Code box add this code for the moment:

jQuery(document).ready(function (jQ) {
  jQ('#customon').maskMoney();
});

Now save the action and the form and view the form in the front-end. When you click in the moneyMask text box you should see 0.00 appear and only the digits 0-9 will be accepted - and only three of those until Max Length is set.

Next, we'll add some options to configure maskMoney by editing the JS Code box. Here are the settings that I used, yours may well be different:

jQuery(document).ready(function (jQ) {
  jQ('#customon').maskMoney(
    decimal: ',',
    thousands: '.',
    prefix: 'R$ '
  });
});

These set the decimal point to a comma, the thousands separator to a full stop and add a currency prefix of R$ 

Lastly we'll set the Max length setting. This has to allow for the number, the separators and the length of the prefix. I set it to 12 which allowed for R$ 99,999.99

Save your form again and now you should see a formatted entry when you click in the box.

Notes:

1. For other options see the maskMoney docs page.
2. If you can't type in the input box in the form then you may have forgotten the Max Length setting!
3. Despite what the docs say the prefix will be submitted with the number (because of the way the ChronoForms validation works) so you may need to edit the data after submission if you need to remove it.