autoNumeric is a Javascript library for working with numbers and country specific number formats. This library is already included in forms and does not have to be loaded separately. See the help pages of that library for an in-depth explanation. The following is a brief overview of this library.
Example
The input field Namen is named tfWeight. We would like it to show the unit kg and have a maximum of three decimal digits. We also want to use an English-style decimal separator (a period .).
First, we set the data type of the input field text. The library autoNumeric will handle the validation for us.
Next, we go to the JavaScript tab of the FORMCYCLE Designer and select the input field via jQuery.
Modern JavaScript (ES6)
const tfWeight = $("[name='tfWeight']");
Legacy JavaScript (Internet Explorer Support)
var tfWeight = $("[name='tfWeight']");
Now we initialize the autoNumeric library by calling the method jQuery.fn.autonumeric. We also pass it the options we want:
tfWeight.autoNumeric({ aDec: '.', // Period as decimal separator aSep: '', // No delimiter symbol for thousands. aSign: ' kg', // Unit kg pSign: 's', // Place the unit at the end of the number (s=suffix). vMin: 1, // Only allow values >= 1 vMax: 100, // Only allow values <= 100 mDec: 3, // At most three decimal places. aPad: false // Do not pad to three decimal places (eg. 5.6 instead of 5.600). })
This allows the user to enter 3.99, which will displayed as 3.99 kg. The JavaScript library autoNumeric takes care of validating the input and displaying the appropriate error messages. It also provides functions for retrieving the plain numeric value, eg. 3.99{ instead of 3.99 kg.
To retrieve the value as a plain number, use the get function:
Modern JavaScript (ES6)
const number = tfWeight.autoNumeric("get") // Returns the value as a number.
Legacy JavaScript (Internet Explorer Support)
var number = tfWeight.autoNumeric("get") // Returns the value as a number.
Finally, you can also change the value with Javascript:
// Sets the value to 49.5. It will be shown as "49.5 kg" in the input field. tfWeight.autoNumeric("set", 49.5);
When submitting the form, the formatted number will be sent and not the plain numeric value, eg. 49.5 kg.
Common options
autoNumeric accepts many options, all of which are optional and have got defalut values. The following are some of the most common options:
- aDec
- Decimal separator.
- aSep
- Group separator. No separator when there's an empty string. E.g. for displaying 1.234,55.'
- dGroup
- Number of digits that will be grouped. The default value is 3, which will insert a separator for each power of 1000 (10^3). For example, the number 123456 will is then formatted as 123.456
- aSign
- Unit. This allows any arbitrary string to be used, such as EUR, kg, °C, 粁 (kilometers), or ¥ (Japanese Yen)
- pSign
- Whether the unit should be placed before or after the number. Use p (prefix) to place the unit before the number, and s (suffix) to place it after the number.
- vMin
- Minimum value. When setting this to 1, a number equal to or greater than 1 must be entered.
- vMax
- Maximum value. When setting this to the number 100, a number equal to or less than 100 must be entered.
- mDec
- Maximum number of decimals places.
See also the documentation for the method jQuery.fn.autonumeric. These options are also described in detail on the website of autoNumeric. In addition, there is a webmask which can be configured comfortably using the above settings.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article