Input format as currency

Wappler General Need Help
1

Hi Wapplers,

I am trying to get an input field to be formatted as currency - i.e $1,000.00

I have set a dynamic attribute to the field, and set value as follows:

value.toNumber().formatCurrency(’$’, ‘.’, ‘,’, 2)

However this is not working and every time I try and type in the input it wont let me. It keeps deleting the first letter I type.

Any idea what I am doing wrong?

Markup is as follows:

 <div class="form-group md-3"> <label for="dealhighlight" class="form-label">Loan Amount</label>
                <input class="form-control" id="dealhighlight" name="dealHighlight" aria-describedby="input2_help" value="$1,000.00" placeholder="$1,000.00" dmx-bind:value="value.toNumber().formatCurrency('$', '.', ',', 2)" type="number">
                <small id="input2_help" class="form-text">Your input is very valuable.</small>
            </div>
2

input type number cannot have comma. need to change input type to text if you wish to show comma.

3

also, with a $ & , in the value, cannot convert to number. hence it will never display a value but only an error.

instead will suggest to use BS5 input group to show the $ sign. ref: https://getbootstrap.com/docs/5.0/forms/input-group/

and to show the comma, you need to use a label or para or maybe it is possible via some custom JS afaik.

1 Like
4

Thank you. I found a custom JS script and it worked great.

5

Do you mind sharing the script?