Hey folks, need help with dynamically formatting numerical user inputs as currency (for instance, ‘$100,000’). As far as I understand, Input Settings do not have a provision for this. Is there some code that I could use to make this work?
Appreciate the help!
Hi,
You can use Regex for that purpose. I’ve found this thread regarding regex currency validation which I think should be helpful.
Good luck,
Tal.
Hey, thanks! Will give it a try.
Hi Tal,
From the thead you pointed Sahas, I was able to find this site which explain well how to convert number to currency in javascript.
Here’s my working code to convert into currency with always two digits, dollar sign at the end and space as a thousands separator:
function formatNumber(num) {
return num
.toFixed(2) // always two decimal digits
.replace(".", ",") // replace decimal point character with ","
.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 ") + " $"; // use " " as a separator
}
Thanks!
Jonathan
Can you advise me on why this code below is not working? I have a user input field, #input1, and want to automatically change the user’s input into a currency format. If the user enters 1000, and tabs out of the field or hits enter, I want it to be replaced with $1,000.00. Here is my current code that does not work:
$w.onReady( function (){
});
export function input1_change(event) {
let num = parseFloat($w(“#input1”).value)
return ‘$’ + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, ‘$1,’)
}
Hi Brian,
I apologize for my late reply. For the little I understand of Wix codes, you may have two errors. The first, which may not be one, is here:
.replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')
My code is:
.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 ")
You may first try the same as me and then try something else to match your need.
The second error is here:
return '$' + num.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')
Your function is not like mine which is called to modify data and return data. You may undestand better with this:
export function total(event) {
var Total;
...
Total = formatNumber(total);
$w("#input120").value = Total;}
function formatNumber(num) {
return "$" + num
.toFixed(2)
.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");}
So, you can try this:
export function input1_change(event, $w) {
let num = parseFloat($w("#input1").value)
$w("#input1").value = '$' + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}
If it does’nt work, you can try like me, calling another function to change your value.
Best luck!
Jonathan
Jonathan,
Thank you! Your suggestions worked. Two things I needed to do in addition to your code suggestion was:
Thank you again.
Hi Brian,
You’re welcome. I’m glad that you found what was missing.
Jonathan
P.S. I apologize if my english is not the best, I’m a french canadian.
Hi Jonathan,
I am kind of new in coding and I need your help.
I have a basic calculation on one of my pages. The calculation works, But I need to add the decimal and $ so it can display on the site. I tried adding your code in multiple ways but I cant seem to get it to work. This is my current code
$w.onReady( function () {
$w(“#input9”).value = ‘75’;
$w(‘#button1’).onClick( function () {
console.log(“button has been pressed”)
$w(‘#input9’).value = “” + (Number($w(‘#dropdown4’).value) + Number($w(‘#dropdown3’).value) + Number($w(‘#dropdown5’).value)+ Number($w(‘#dropdown6’).value) + 75.00 ) ;
console.log(“calculation finished”)
})
Where would I add the code to have input9 display a decimals and $
Hi Harry,
Thanks for asking. Glad to help.
If I understood you correctly, you read what Brian Bishop and I exchanged and it is not clear enough. Let me try to explain better. But first, I’ll quote myself:
Your function is not like mine which is called to modify data and return data. You may undestand better with this:
export function total(event) {
var Total;
...
Total = formatNumber(total);
$w("#input120").value = Total;}
function formatNumber(num) {
return "$" + num
.toFixed(2)
.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");}
You must first to add the function formatNumber in your code. It can be placed anywhere you want in your code exept inside of an another function. I prefer to put it at the very end, because, once it’s tuned like I want it, it’s useless to see it always when I look at my code.
Second, you neet to decide how you want to use formatNumber. You can use it indirectly or directly. What I mean by that is:
Indirectly: Y ou use a variable to keep your number and you convert it to the end with the function. Then you pass the contents of the variable to your field, as in my example.
Directly: You pass the formatNumber function to the input field and place your calculation as an argument to the function. Here’s an example using what you wrote:
// For full API documentation, including code examples, visit https://www.wix.com/code/reference/
$w.onReady(function () {
});
export function button555_click(event) {
console.log("button has been pressed");
$w('#input9').value = formatNumber(Number($w('#dropdown3').value) + Number($w('#dropdown4').value) + Number($w('#dropdown5').value)+ Number($w('#dropdown6').value) + 75);
console.log("calculation finished");
}
function formatNumber(num) {
return "$" + num
.toFixed(2)
.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");}
As you can see, I did not put anything inside $w.onReady(function () {});. That’s because what you want to do is, if I understand correctly, click on a button to perform a calculation and a conversion. The function called by clicking can not be inside $w.onReady(function () {});. It was a mistake as by default Wix put functions outside $w.onReady(function () {});. Better do like Wix.
Other error, you missed semicolons after your console.log();. You may also have another error here with :
$w('#input9').value = (Number($w('#dropdown4').value) + Number($w('#dropdown3').value) + Number($w('#dropdown5').value)+ Number($w('#dropdown6').value) + 75.00);
The program may understand that you use strings instead of numbers just because of the “” +. I prefer not to add .00 after a number, but it’s up to you.
You putted $w(“#input9”).value = 75; inside $w.onReady(function () {});. I don’t know if it really works, but I prefer to put the default value in the page layout instead of using code. And you do not use that value in your calculation but a number, here 75.
I hope this will help you. Have a nice day!
Jonathan
There is some example code for this here: https://www.wixcodebank.com/money-to-number-conversion
@jonathan-2 disculpa que te escriba en español, me sirvio tu ayuda. gracias
What am I missing? Why aren’t you using .toLocaleString( ‘en-US’ , { style: ‘currency’, currency: ‘USD’ })
?
@urielcasadiego
Entiendo un poco el español. Puedo escribirte también en español, pero será más fácil para mi se puedo escribirte en francés o en inglés.
Because I’m a beginner in Wix coding and only know a very little in javascript…
Got it, but the solution presented in this thread is much more difficult and requires much more Javascript coding. So If you want, you can use, toLocaleString:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#Using_options
@jonatandor35 Excellent!!! Definitly better. Thanks for sharing!
Hi
I need to put this code in a textbox but I don't know how, I need to declare something with the ID of the textbox?
I have this running but can use a little help finishing it. I’m looking for the final number to read like $ 141,000,000.53. The numbers animate just fine but I can’t get it to read a decimal point and a comma. Please help me adjust this code. Been looking for solutions for days.
$w.onReady( function () {
let startNum = 14000000000 ;
let endNum = 14100000053 ;
const duration = 10 ; // 1000 macroseconds
$w.onReady( function () {
setInterval(()=> {
countUp();
}, duration);
});
function countUp(){
if (startNum <= endNum ){
$w( ‘#transaction’ ).text = startNum.toLocaleString().toString();
startNum++;
}
}