4

I have seen a few of these jquery things going on, and just wondered if there was a simple number formatting script.

Essentially, all we wish to do, is format ( client side ) for checking purposes only, the number entered in a field. To show somewhere else on the page ( presumably in a div ) the formatted price they entered.

So lets say, field

input id="price" name="price" size="50" type="text" class="medium" /

And they enter 1234560

I want to show somewhere else on the page, : You Entered : $1,234,560.00 as the price. Is this correct ?

This is only for visual purposes only. Alternatively, changing the value of what they type and formatting it "live" could be an option, however the value we want to send to the db is pure numerics, ie: 1234560

422
  • 5,714
  • 23
  • 83
  • 139
  • 1
    Check this question in stackoverflow itself http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript – kobe Nov 14 '10 at 01:45
  • looked at that, but seems very heavy. Also no actual definitive answer that would solve our requirement, unless I am looking in the wrong place – 422 Nov 14 '10 at 02:01
  • How could I incorporate this: http://plugins.jquery.com/files/jquery.number_format.js_0.txt into actual html page ? and apply to the form field – 422 Nov 14 '10 at 02:06

1 Answers1

3

Setup a function like this one Javascript format currency

function CurrencyFormatted(amount) {
    var i = parseFloat(amount);
    if(isNaN(i)) { i = 0.00; }
    var minus = '';
    if(i < 0) { minus = '-'; }
    i = Math.abs(i);
    i = parseInt((i + .005) * 100);
    i = i / 100;
    s = new String(i);
    if(s.indexOf('.') < 0) { s += '.00'; }
    if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
    s = minus + s;
    return s;
}

Then set an onchange for jQuery something like this

jQuery(document).ready(function(){
  jQuery('#price').change(function(){
      jQuery('#mydivsomewhere').val(CurrencyChange(jQuery('#price').val()));
  });
});

Not sure if that is 100% correct, haven't tested it. But should call CurrencyFormat whenever the text in your input box changes. Should pass in the val of the textbox with id of price and set a div of id mydivsomewhere with the formatted value.

Luis Lobo
  • 489
  • 4
  • 7
Ryan Doom
  • 2,407
  • 1
  • 16
  • 13
  • 2
    @ryan , how did you write so fast? – kobe Nov 14 '10 at 02:05
  • thanks Ryan, how do i a) add this to input field b) echo the result c) without affecting the value of input field bit dense I know – 422 Nov 14 '10 at 02:12
  • My bad, seen the example page now. However this requires that onsubmit needed, can we do this without having to click submit button. Example here: http://www.willmaster.com/library/demo/commaNcurrency/commaNcurrency.html. Also would like the result to appear with $ in front of numbers, and in a div not a field – 422 Nov 14 '10 at 02:14
  • Hah, I write a lot of Javascript. I tried to make this pretty readable / simple since I figured you were not a JS wizard :] i think the above code will actually fire when you leave that field. instead of .change you may want to use .keyup that will fire whenever the user hits a key in the input field – Ryan Doom Nov 14 '10 at 02:34
  • thanks ryan, no I am hopeless. Im not sure how to fire the result into the div tho. Something like? div id="mydivsomewhere"> – 422 Nov 14 '10 at 02:39
  • Presumably:

    But how to pass to that element the jquery value ?     – 422 Nov 14 '10 at 02:47