Automatically edit users input when they click off input

260
November 21, 2016, at 9:12 PM

This seems to be a simple problem - However I just can't get my head around it! So basically what the issue is, is that when a customer enters a "Payment amount" on my website I am trying to convert their input into something like this...

CUSTOMER INPUTS SOMETHING LIKE THIS: £175.98

I want it to be converted to something like this: 175.98

Or if the customer enters 19803 I want to be able to append the decimal and comma places and remove any invalid characters like so: 19,803.00

I have searched and searched the internet for about 2 days and can't find anything like this!

Sorry I haven't provided any code but I figured if i can't find anything like this I'm sure that others will have the same issue.

Form I am using:

<form action="https://myaccount.mysite.com/s/customer/payment/new-payment/action.do" method="post">
    <input type="text" name="pamt" id="payment_amount" />
    <input type="submit" value="Continue to PayPal" />
</form>
Answer 1

You should try out numeral.js. I have used it for similar formatting tasks in the past.

http://numeraljs.com/

For example:

var string = numeral(1000).format('0,0.00');

So, then you could use the onblur event to change the value to what you would like it to be:

<form action="https://myaccount.mysite.com/s/customer/payment/new-payment/action.do" method="post">
    <input type="text" name="pamt" id="payment_amount" onblur="try{this.value = numeral(this.value).format('0,0.00') }catch(e){};" />
    <input type="submit" value="Continue to PayPal" />
</form>

UPDATE

It appears there is a bug in the following version of numeral.js

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>

However, I had full success using the version titled numeral.js that can be downloaded here:

https://github.com/adamwdraper/Numeral-js/zipball/master

READ ALSO
Toggling show/hide anchored divs

Toggling show/hide anchored divs

I have a list of Services with their respective descriptions, which I have linked to with anchor links. [nnn]The service details are hidden until I click on a service name.

329
Knockout js and ajax get method to display search results on another page

Knockout js and ajax get method to display search results on another page

I am converting an exisiting modal that contained search results into a search results page. (That being said the model shouldn't change.

211
In jquery, how do I highlight only the div under the cursor using the hover function?

In jquery, how do I highlight only the div under the cursor using the hover function?

I just want to border only the 'div' under the blue point by using. hover() function in the image below.

358
Target Only Safari in Javascript

Target Only Safari in Javascript

I've got this code running on my squarespace site very nicely, which utilises a video as a background image. Only problem is I've created a custom navigation menu, and added some jquery elsewhere, which seems to stop working in Safari whenever the video is set as the background...

355