How to? Input number field to always show to 2 decimal places

[UKRiggers]

I have lots of number input fields and everytime a number is manually typed in or a number comes from a query, I always want to show 2 decimal places. It is OK if someone types 5.25, but if they just type 5, I want the .00 added to the number. How can I do this?

Maybe use a Pattern?

[scott]

@UKRiggers, this might help you out. How to Round a number with decimals with Server Data Formatter

You can use the same concept on the App Structure side as well.

[UKRiggers]

Hi @scott, thanks for that, but it doesn’t help with a blank input field where the user types in a number ‘5’ for example. It will show as 5 and not 5.00 or am I missing something?

Maybe use a Pattern?

[scott]

I’m not in a position to bring Wappler up, but I think it would apply because it would change the number from 5 to 5.00 upon submission.

You could also do a validate on the App Structure side to force the user to input the number in decimal format.

[UKRiggers]

Cheers for that, I’m trying to keep the number of keystrokes (for the user) to a minimum. And yes, I understand we can manipulate the data on submission to format to 2 decimal places but I want the user to see this as he enters the data. I’ve done it before but just can’t remember how.

The blanks in my brain only used to happen on a Friday, now it happens everyday!

[scott]

The blanks in my brain only used to happen on a Friday, now it happens everyday!

I agree completely !

[ben]

This may be of assistance https://plentz.github.io/jquery-maskmoney/

[TomD]

Would this do it:
dmx-on:blur="text1.setValue(value.toNumber().formatNumber(2, ".", ","))"
?

[Hyperbytes]

or this thread

Currency input

Hello! I’m having problems to set an input as a currency format. This is what i want to achieve with wappler: [image] While typing the numbers, the input takes the form of a currency with comma as decimal separator and “.” as thousand separator. [image]

[UKRiggers]

@Tom that’s just what I wanted, thanks. I did try something very similar using key up but it didn’t work. I recreated your example and just like magic, it does what it says on the tin

[TomD]

it does what it says on the tin

Great - I’m glad that was useful. However, there is some small print on the tin: if you enter ‘12,000.00’ or ‘12,000’ for example and tab out of the field, ‘Invalid Number’ will appear - and your number will be deleted. It’s best that users don’t enter commas and trailing zeros etc. - and this will probably persuade them not to.

[UKRiggers]

Thanks for the heads-up. I have had a play to see what happens. If the Input field is set to Number then I can only enter 3 (or 4) digits. If it is set as a Text field then there are only problems if you type in the comma separator. This will be OK with this particular client. I know how their previous system works.

[TomD]

I don’t think it’s a problem. It’s good to have the extra validation included, though perhaps ideally it wouldn’t remove the invalid number in the process. Not much of an issue unless you’re entering very long numbers - in which case you could reinstate the invalid number to edit, by storing it in a variable and using that to repopulate the input field.

There are also problems if you type other invalid characters such as spaces or letters (but still, not much of an issue).