autoNumeric (number format)

author	version	line-number	content
1	{{content/}}
2
3	{{jsdoc page="jquery" name="autonumeric"}}autoNumeric{{/jsdoc}} 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>>url:https://github.com/BobKnothe/autoNumeric]] for an in-depth explanation. The following is a brief overview of this library.
4
5	{{figure image="designer_advanced_autonumeric_en.png" width="500"}}
6	Making use of //autoNumeric// to implement different numerical formats with or without units.
7	{{/figure}}
8
9	== Example ==
10
11	The input field [[Namen>>doc:Formcycle.FormDesigner.ElementProperties.BaseProperties.WebHome]] 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 {{code language="none"}}.{{/code}}).
12
13	First, we set the [[data type>>doc:Formcycle.FormDesigner.FormElements.Input]] of the input field //text//. The library autoNumeric will handle the validation for us.
14
15	Next, we go to the [[JavaScript tab>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]] of the {{designer/}} and select the input field via jQuery.
16
17	{{js}}
18	const tfWeight = $("[name='tfWeight']");
19	{{/js}}
20
21	{{jsIE}}
22	var tfWeight = $("[name='tfWeight']");
23	{{/jsIE}}
24
25	Now we initialize the autoNumeric library by calling the method {{jsdoc page="jquery" name="autonumeric"/}}. We also pass it the options we want:
26
27	{{code language="javascript"}}
28	tfWeight.autoNumeric({
29	aDec: '.', // Period as decimal separator
30	aSep: '', // No delimiter symbol for thousands.
31	aSign: ' kg', // Unit kg
32	pSign: 's', // Place the unit at the end of the number (s=suffix).
33	vMin: 1, // Only allow values >= 1
34	vMax: 100, // Only allow values <= 100
35	mDec: 3, // At most three decimal places.
36	aPad: false // Do not pad to three decimal places (eg. 5.6 instead of 5.600).
37	})
38	{{/code}}
39
40	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//.
41
42	To retrieve the value as a plain number, use the //get// function:
43
44	{{js}}
45	const number = tfWeight.autoNumeric("get") // Returns the value as a number.
46	{{/js}}
47
48	{{jsIE}}
49	var number = tfWeight.autoNumeric("get") // Returns the value as a number.
50	{{/jsIE}}
51
52	Finally, you can also change the value with Javascript:
53
54	{{code language="javascript"}}
55	// Sets the value to 49.5. It will be shown as "49.5 kg" in the input field.
56	tfWeight.autoNumeric("set", 49.5);
57	{{/code}}
58
59	When submitting the form, the formatted number will be sent and not the plain numeric value, eg. {{code language="none"}}49.5 kg{{/code}}.
60
61	== Common options ==
62
63	autoNumeric accepts many options, all of which are optional and have got defalut values. The following are some of the most common options:
64
65	; aDec
66	: Decimal separator.
67	; aSep
68	: Group separator. No separator when there's an empty string. E.g. for displaying //1.234,55//
69	; dGroup
70	: Number of digits that will be grouped. The default value is {{code language="none"}}3{{/code}}, which will insert a separator for each power of 1000 (10^3). For example, the number {{code language="none"}}123456{{/code}} will is then formatted as //123.456//
71	; aSign
72	: Unit. This allows any arbitrary string to be used, such as EUR, kg, °C, {{html}}粁{{/html}} (kilometers), or ¥ (Japanese Yen)
73	; pSign
74	: 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
75	; vMin
76	: Minimum value. When setting this to 1, a number equal to or greater than 1 must be entered
77	; vMax
78	: Maximum value. When setting this to the number 100, a number equal to or less than 100 must be entered
79	; mDec
80	: Maximum number of decimals places
81
82	See also the documentation for the method {{jsdoc page="jquery" name="autonumeric"/}}. These options are also described in detail on the [[website of autoNumeric>>url:https://github.com/autoNumeric/autoNumeric/blob/next/doc/Documentation.md]]. In addition, there is a [[webmask>>url:http://www.decorplanit.com/plugin/]] which can be configured comfortably using the above settings.

{{jsdoc page="jquery" name="autonumeric"}}autoNumeric{{/jsdoc}} 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>>url:https://github.com/BobKnothe/autoNumeric]] for an in-depth explanation. The following is a brief overview of this library.

4

5

{{figure image="designer_advanced_autonumeric_en.png" width="500"}}

6

Making use of //autoNumeric// to implement different numerical formats with or without units.

== Example ==

The input field [[Namen>>doc:Formcycle.FormDesigner.ElementProperties.BaseProperties.WebHome]] 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 {{code language="none"}}.{{/code}}).

12

13

First, we set the [[data type>>doc:Formcycle.FormDesigner.FormElements.Input]] of the input field //text//. The library autoNumeric will handle the validation for us.

14

15

Next, we go to the [[JavaScript tab>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]] of the {{designer/}} and select the input field via jQuery.

16

17

18

const tfWeight = $("[name='tfWeight']");

var tfWeight = $("[name='tfWeight']");

23

24

25

Now we initialize the autoNumeric library by calling the method {{jsdoc page="jquery" name="autonumeric"/}}. We also pass it the options we want:

26

27

28

tfWeight.autoNumeric({

29

aDec: '.', // Period as decimal separator

30

aSep: '', // No delimiter symbol for thousands.

31

aSign: ' kg', // Unit kg

32

pSign: 's', // Place the unit at the end of the number (s=suffix).

33

vMin: 1, // Only allow values >= 1

34

vMax: 100, // Only allow values <= 100

35

mDec: 3, // At most three decimal places.

36

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//.

41

42

To retrieve the value as a plain number, use the //get// function:

43

44

45

const number = tfWeight.autoNumeric("get") // Returns the value as a number.

var number = tfWeight.autoNumeric("get") // Returns the value as a number.

50

51

52

Finally, you can also change the value with Javascript:

53

54

55

// Sets the value to 49.5. It will be shown as "49.5 kg" in the input field.

56

tfWeight.autoNumeric("set", 49.5);

57

58

59

When submitting the form, the formatted number will be sent and not the plain numeric value, eg. {{code language="none"}}49.5 kg{{/code}}.

== 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//

69

; dGroup

70

: Number of digits that will be grouped. The default value is {{code language="none"}}3{{/code}}, which will insert a separator for each power of 1000 (10^3). For example, the number {{code language="none"}}123456{{/code}} will is then formatted as //123.456//

71

; aSign

72

: Unit. This allows any arbitrary string to be used, such as EUR, kg, °C, {{html}}粁{{/html}} (kilometers), or ¥ (Japanese Yen)

73

; pSign

74

: 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

75

; vMin

76

: Minimum value. When setting this to 1, a number equal to or greater than 1 must be entered

77

; vMax

78

: Maximum value. When setting this to the number 100, a number equal to or less than 100 must be entered

79

; mDec

80

: Maximum number of decimals places

81

82

See also the documentation for the method {{jsdoc page="jquery" name="autonumeric"/}}. These options are also described in detail on the [[website of autoNumeric>>url:https://github.com/autoNumeric/autoNumeric/blob/next/doc/Documentation.md]]. In addition, there is a [[webmask>>url:http://www.decorplanit.com/plugin/]] which can be configured comfortably using the above settings.

Wiki source code of autoNumeric (Zahlenformat)

Navigation