How to define a currency in a user input field?.

Ask the community
,
1

I defined in a collection a numeric field. Separators don’t work (Comma) and I can’t setup US currency with $###,###,### format

1 Like
2

Have you tried a Regex?

3

Hi,

You can take a look with these.

Have a good day.
Heson

4

I used $\ ?[±]?[0-9]{1,3}(?:,?[0-9])*(?:.[0-9]{1,2})? Regex but is not working

5

Thanks I took a look at the link but can’t find what I’m looking for. The example is value 123456789 I want to display as $123,456,789

6

Hey,

Found some code somewhere on the Internet and fixed it up a bit. How about this…

This code goes in a file under public (e.g. currency.js):

export function fmt(num) {
   return num.formatMoney(2, '.', ',');
}

Number.prototype.formatMoney = function(cc, dd, tt){
   let n = this;
   let c = isNaN(c = Math.abs(cc)) ? 2 : cc;
   let d = dd === undefined ? "." : dd;
   let t = tt === undefined ? "," : tt; 
   let s = n < 0 ? "-" : "";
   let i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c), 10));
   let j = (j = i.length) > 3 ? j % 3 : 0;
   return "$" + s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };

Then on your page, you will need something like this:

import {fmt} from 'public/currency.js'

$w.onReady(function () {
   let amount = 123456789;
   let formatted = fmt(amount);
   console.log("formatted money field: " + formatted);
});

I hope this helps,

Yisrael

7

Thanks I will try it

8

There is an example of this here:
https://www.wixcodebank.com/money-to-number-conversion

9

I tried this in a live page to dynamically adjust the presentation of a TextInput, the issue was that after reformatting the number to show as currency then the dataset couldn’t save the data anymore. I presume because the field is a Number type in the data collection it didn’t like the extra formatting characters.

Ideally I want to strip all the formatting on save, so the DB has clean numeric data.

So what extra steps could I take take to format numbers as currency but still save them back to the DB correctly when required?

Cheers,
Matt

10

@matt31353 Have you seen this example: https://www.wixcodebank.com/money-to-number-conversion

11

@will_fourie not yet - does it have the full load, format, then save cycle documented?

12

@matt31353 Don’t think so, but you can email them for assistance if it is close to what you want.

13

@will_fourie Thanks will. My remaining issue is really with getting the currency formatted field to save back into the collection without being discarded by the wix dataset. Writing the js to convert between formats is straight forward, I’m just not sure how to hook that up such that while we see currency, the field still save as number correctly.

14

@matt31353 Wrap it in Number() function perhaps before saving.

15

@will_fourie Where would I have an opportunity to intercept the number?

I guess I could use the dataset onBeforeSave( ) to reformat all the field values back to numbers, then use onAfterSave() to reformat to currency again? My concern is that would cause a weird UI blip while the numbers are being saved.

Or do you think I should abandon using the Wix dataset for saving altogether and send the data to the backend using a web-module or http-function for saving?

Other suggestions?

16

@matt31353 It shouldn’t be too hard, and I don’t think you need any of the above. Do you want to email me at contact@wixcodebank.com … its my site, happy to take a look when I get a chance. Perhaps send some screenshots of your code and a link to your site.

17

Hey @sautojesus , @yisrael-wix - you can see my version of currency and percent field handling for Wix datasets here: https://github.com/matt-chalmers/wix-util/tree/master/src/UI

If you put that module in your public folder via Corvid, then it will allow you to specify which UI/dataset fields you want formatted and then it will setup event handlers so that edited data continues to be formatted correctly and stored back to the Wix dataset using the correct datatype.

NB - you setup the fields as Text Input fields of type Text (not Number) in the first place using the Wix UI editor. But do not bind them to your dataset, because this module is a hack to handle the binding and the format handling.

Not sure if there’s a simpler way?

Cheers,
Matt

18

Does this still work Matt?