Format text field with Standard Numeric Format

Hi All,

I’m new here, so many thanks for the support. I have searched the forum and web everywhere but can’t find a straight answer to a common topic, and I’m struggling with the variables. 2 questions:

  1. How can I simply format a text field so that once numbers are inserted they show up as Standard Numeric Format number (xx,xxx.00).

2.Alternatively, how can I format a number so that decimals are suppressed (e.g. if I entered 10571.75 the field will show 10,572). Is this possible?

Many thanks

Hi, not sure how to format text input, but you can round entered value by using math.ceil() function:

round_input.rp (44.9 KB)

1 Like

Here is an example showing how to format text strings, including Text Field widgets, such that commas show up as needed. Please note this does not work in most browsers when the Text Field widget is set to Type: Number (exception being MSIE.)

The secret is to use the built-in string.toLocaleString() function, as described in this thread:
https://forum.axure.com/t/number-formatting-and-sorting-in-a-repeater/26674/11?u=mbc66

There is also an example of how to supress decimals (or set decimal to any number of significant places) using the toFixed() function, as well as combining this with the “comma formatting.”

FormatNumbersWithCommas.rp (70.4 KB)

1 Like

Thank you for your help, I appreciate it. I learned how to use the math function. however, I can’t use a text field formatted as number, I need to do it on a text field.

Thank you again for your links, I am however still struggling. Clearly I have a long way to go on functions. I tried to make it work based on the examples, but couldn’t. I am attaching a file with what I need to do, if anyone can give me some guidance on the file itself on how to proceed, it would be great.

Many thanks in advance.Number formatting.rp (48.4 KB)

Hi @cgrynberg,

First: The “item” variable only works in repeaters—since you’re not using a repeater, you don’t need “item” here.

Second: You’re using a local variable, LVAR1. But LVAR1 is not defined in your file…

Whenever you’re using a local variable, you’ll need to define it by using the “Add Local Variable” link. So if you wanted to use LVAR1, you would add a new local variable, and set it to refer to the text on the widget. BUT, you actually don’t need a local variable here. Since you are setting up the action on the input field itself, you can also use [[This.text]] to get the text from that field. If you were trying to access the text from that widget from somewhere else (e.g., a Submit button), then you would have to define a local variable instead. But in your case, since your action is on the input field, [[This.text]] should work fine.

So your formula would be: [[(This.text * 1).toLocaleString()]

However, since you’re trying to use the formula to replace the text while you’re typing, then as soon as the first comma gets added, the formula won’t work anymore, because the math doesn’t work.

So one thing you could do would be to remove the commas by using the replace function:
[[(This.text.replace(‘,’,‘’) * 1).toLocaleString()]]

This doesn’t work with decimal points though. So it only handles your second case. And also it doesn’t allow the user to type in a decimal at all, so it’s not exactly what you were asking for. But hopefully that gives you some more info about variables that will be helpful for you later…

I ran out of time so I wasn’t able to work on a solution for that first case, but if I can I’ll come back and work on it later. Or possibly, someone else will answer before I get a chance. :slight_smile:

-skb

1 Like

@cgrynberg,

To learn more about using variables like this in Axure, this reference page is a good start:
https://www.axure.com/support/reference/variables

Here is an update with solutions for both your problems:
Number formatting.rp (70.3 KB)

The basic approach of my methods is to use the OnKeyUp event to test the last char of the string (which would be the last char entered) and throw it away if it is not numeric. Note that “numeric” chars include commas and dots. Then, with the OnLostFocus event, the text string is formatted–so the commas and correct decimal places are not shown until the user clicks or tabs away from the input field (and for good measure, if the Enter key is pressed, that works as well via hidden Submit button–which just fires the OnLostFocus event for the input field.) This allows the user to enter any number of decimal places and then have the input evaluated and formatted.

1 Like

@skb, thank you very much for the detailed explanation, this is very useful. I managed to make it work based on your advice. And I learned something for the next time :slight_smile: Thank you very much! cheers

@mbc66, wow, thank you very very much! This is fantastic. I am going through the rp file now to make sure I understand and can use it in the future. I have been to the variables section as you pointed out, and have managed to use them, but when it starts getting more complex, still struggling on how to proceed. Will keep going and using the great forum when I bump into problems. Many thanks again for your detailed help!