Streaming live at 10am (PST)

How to change textfield input box to a currency‏


#1

Hi,

Please help me.

I need help to solve this situation below.

Please see the “red box” below.
My clients will fill a value in this box. For example: USD 100,000.00
When my client to fill this box with the value, for exemplo 100000 this box automatically will fill USD 100,000.00.
How do I it? Do I need to put a attribute?
What atribute code?

My site is http://cliente1209.webflow.io/

Thank you!


#2

Can you please post the read-only link @CC3008?

Here is the script you'd need to add to your footer for the commas to auto populate (need to put in the right ID I believe). I'm trying to find one to add the ".00" at the end of the value.

     <script>
	$(document).ready(function(){
​
​
    $('input.number').keyup(function(event){
      // skip for arrow keys
      if(event.which >= 37 && event.which <= 40){
          event.preventDefault();
      }
      var $this = $(this);
      var num = $this.val().replace(/,/gi, "").split("").reverse().join("");
​
      var num2 = RemoveRougeChar(num.replace(/(.{3})/g,"$1,").split("").reverse().join(""));
​
      $this.val(num2);});});
​
    function RemoveRougeChar(convertString){
​
​
    if(convertString.substring(0,1) == ","){
​
        return convertString.substring(1, convertString.length)            
​
    }
    return convertString;
​
	}</script>

Thanks,

Waldo


#3

Hi @Waldo

Yes, please see the link below:
https://preview.webflow.com/preview/cliente1209?preview=421b861af91d4b712b6759215e5b0006

I pasted the code in the footer. Where I put this id ?
Sorry, I do not have much knowledge with code.

Tks!


#4

@CC3008 can you please post the code into the page level of your site? It will be easier to pull from there, the ID you'd insert is: VALOR-M-XIMO-4

And it looks like the code needs some updating as you all use decimals rather than commas between three digit fields.

Let me know once you've added the updated code into your footer of the home page. :smile: (Go to page, page settings and scroll down to add custom code at the page level rather than at the site level). :smile:

Talk soon,

Waldo


#5

Hi @Waldo,

I don't know if I pasted in the right place. I'm sending the pictures below.

1) ID:

2) About you question "can you please post the code into the page level of your site?". Will I paste the code in the "Embed tag"?

3) Please let me know if I need to put the ID VALOR-M-XIMO-4 in the scrip. Where?

Many thanks!


#6

Hi @Waldo,

How are you?

Could you help me please?
Please let me know if I pasted the code in the right place. It's not working.

Thanks!


#7

Hello @CC3008 doing well thank you, sorry I missed this before! You'll actually want to go to your page, then page settings and paste in the code in the before tag custom code section.

Once you've done this can you please publish the page, then send me a link to the live page?

Thanks,

Waldo :smile:


#8

Hi @Waldo

Great! Have a good week.

Well, I pasted the code.
Please see the site below and let me know the next step.

https://preview.webflow.com/preview/cliente1209?preview=421b861af91d4b712b6759215e5b0006


#9

Hi @Waldo ,

Please let me know the next step.
I pasted the code in custom code section.
https://preview.webflow.com/preview/cliente1209?preview=421b861af91d4b712b6759215e5b0006

Please let me know what to do.

Tks,


#10

Try changing 'input.number' to 'input#VALOR--M--XIMO--4'

This will make the jQuery code look for the input field with that ID whenever a number is typed into that field.

Also, try learning jQuery. It's a fun and fascinating way to get more out of your Webflow site. When Webflow can't do exactly what you want, you can add your own custom code.

https://www.codecademy.com/learn/jquery


#11

Great @PixelGeek!

It's working! Very good @PixelGeek and @Waldo. You are the best!

I would like to have "." too, for example: 100,000.00
Could you help me with it too?

Thanks for the tip. I'll study next weekend.

Tks!


#12

I did a quick google search on "decimals jquery"

and I found this:
http://stackoverflow.com/a/9987768

Hope this helps :smile:


#13