How to use custom thousand and decimal separators? [RESOLVED]

Get Help
1

Hello,

I’d like to use custom separators/number format in a number field. I want to display the weight and we use this format here in Switzerland:
20’000,00 kg

Is this possible somehow?

Thanks, M.

2

Hi Michael,

First, add “totalkg” as a custom CSS class to the Simple Line Text field from Field Settings → Appearance → Custom CSS Class, as shown in the screenshot below.

custom class
custom class3446×912 103 KB

Now add the following JavaScript code in the child theme’s JS file or try using the “Simple Custom CSS and JS” plugin to add the JavaScript code.

jQuery(document).ready(function( $ ){
	$('.totalkg input').on('blur', function(){
		$(this).val(formatSwissNumber($(this).val()));
	});

	function formatSwissNumber(number) {
		number = number.replace(/[^\d.-]/g, '');
		number = parseFloat(number);
		if (isNaN(number)) {
			return '';
		}
		number = Math.round(number * 100) / 100;
		return number.toLocaleString('de-CH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
	}
});

The final output will look like the following screen recording.

Final output

Give it a try, and let me know how that goes! :smile:

3

Hi Faisal, it is almost perfect!

But I do get this number format: 4’444.00

And I need this one: 4’444,00
(the decimal separator should be a comma)

What do I have to change in the code?

And I am using Live Merge Tags. Is there also a way to change the number format there?

Screenshot Firefox Developer Edition 2024-03-21 at 13.44.23

Thanks for your help,
M.

4

Got it. Please try the updated code below.

jQuery(document).ready(function( $ ){
	$('.totalkg input').on('blur', function(){
		$(this).val(formatSwissNumber($(this).val()));
	});

	function formatSwissNumber(number) {
		number = number.replace(/[^\d,]/g, '');
		number = parseFloat(number.replace(',', '.'));
		if (isNaN(number)) {
			return '';
		}
		number = Math.round(number * 100) / 100;
		return number.toLocaleString('de-CH', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).replace('.', ',');
	}
});

Output:

CleanShot 2024-03-21 at 20.31.09@2x
CleanShot 2024-03-21 at 20.31.09@2x1024×380 18.2 KB

5

Hello Faisal,

great, thanks a lot. That did change it to the correct number format.

Unfortunately, the code only works partially. The check fails because the number format entered (which was changed/overwritten by the custom JavaScript) probably does not match the number format selected in the field dropdown.

This is the correct number format before submitting the form:

number-format_before-submitting
number-format_before-submitting1368×398 24.1 KB

And here is the wrong number format AFTER trying to submit the form. I cannot submit the form because of the error:

number-format_after-submitting
number-format_after-submitting1376×382 24.5 KB

That’s the number format I chose in the field settings (in Gravity Forms):

gravity-forms_number-format
gravity-forms_number-format2214×190 11 KB

Is there anything I can do to fix this?

Thanks for your help,
Michael

6

Hey Michael,

Please try the “Sinel Line Text” field instead of Number field. When you’ll use a number field with number format, the jQuery code won’t able to maintain the format.

Please keep me posted about the outcome. Thank you :+1:

1 Like
7

Awesome!!! The code works when using a single line field instead of a numbers field.

Thanks a lot,
Michael

8

Sorry Faisal, I discovered a problem.

I am using this number to calculate a total price (Sum = {Field A:01} * {Field B:02}). Field A is the single line field for the weight. Field B is the “amount” field. The total sum is a total price.

If I enter a number (i.e. 50) in the weight it will be displayed correctly as 50,00. But it will be calculated as 5000. So if I have 50,00 * 2000 the total sum will be 10’000’000.

So I think the best would be to eliminate the decimals in the “weight” field.

Is that possible somehow?

Thanks again,
Michael

9

Hi Michael,

Sure, please use the following code. If that doesn’t work, you can share the exact webpage URL so I can further investigate to resolve it. (You might need to trigger the code for the total sum field as well.)

jQuery(document).ready(function($){
    $('.totalkg input').on('blur', function(){
        $(this).val(formatSwissNumber($(this).val()));
    });

    function formatSwissNumber(number) {
        number = number.replace(/[^\d,]/g, '');
        number = parseFloat(number.replace(',', '.'));
        if (isNaN(number)) {
            return '';
        }
        return Math.round(number).toLocaleString('de-CH').replace('.', "'");
    }
});
2 Likes
10

Hi Faisal,

that did work :slight_smile: .

Thank you so much,
M.

2 Likes