8

Possible Duplicate:
JavaScript: formatting number with exactly two decimals

Maybe I'm going about this the wrong way, but I have some javascript which is filling up some text inputs with numbers like 12.434234234. I want the text input to only display 12.43, but I'd like it's value to remain as 12.434234234.

Is this even possible? If not, what would be the best work-around?

Thanks! John.

--

Although there were some very good answers here, I was looking for something like 'why don't you just use this clever one liner thing..' - hence I've ticked the most basic approach which is to just use an extra field. Thanks though! Marked up all answers.

CalvT
  • 3,123
  • 6
  • 37
  • 54
John Hunt
  • 4,265
  • 8
  • 45
  • 59
  • What kind of interaction does the user have with these numbers? Why is it important to retain precision? – Brandon Boone Mar 16 '11 at 01:43
  • My client wants the ability to split a transaction, eg $12.53 into several percentage parts. Eg 50% of $12.53 is two lots of $6.265. Even though .5 of a cent doesn't sound like much we don't want to lose that money somewhere. We do draw the line somewhere, but that somewhere will be in the database or somewhere I don't care about, as long as there's a fair amount of precision. – John Hunt Mar 16 '11 at 01:54
  • But my client also doesn't want the app to display that kind of precision because it looks ugly :p – John Hunt Mar 16 '11 at 01:55

4 Answers4

15
num = 12.434234234;
result = num.toFixed(2); // returns 12.43
Mike Lewis
  • 63,433
  • 20
  • 141
  • 111
6

You can store the fine-grained values in hidden fields, and trim the ones displayed for the user.

weltraumpirat
  • 22,544
  • 5
  • 40
  • 54
  • You may as well use a variable rather than creating a whole hidden field for this purpose. – mgiuca Mar 16 '11 at 01:46
  • Text inputs are usually used for HTML forms. Where would you retain that variable for further processing? – weltraumpirat Mar 16 '11 at 01:47
  • I see, this is if you are going to have a non-JavaScript interaction with the server, and want to retain the full value over several pages. Yes, then that's what you want. If you just want the value to be remembered during the interactions with a single page, then a variable is sufficient. – mgiuca Mar 16 '11 at 01:56
4

You could store the value of the input as data of the input (using jQuery), format it onload and then replace the value during submit like so:

http://jsfiddle.net/magicaj/8cdRs/1/

HTML:

<form id="form">
    <input type="text" class="formatted-number-input" value="12.434234234" />
</form>

JS:

$(".formatted-number-input").each(function() {
   var value = $(this).val(); 
   $(this).data("originalValue", value);
   var roundedValue = value.toFixed(2);
   $(this).val(roundedValue);
});

$("#form").submit(function() {    
    var formattedInput = $(".formatted-number-input");
    formattedInput.each(function() {
        var originalValue = $(this).data("originalValue");
        $(this).val(originalValue);
    });
});
Adam Ayres
  • 8,732
  • 1
  • 32
  • 25
  • The old switcharoo, I like it! – John Hunt Mar 16 '11 at 01:56
  • @John Hunt Haha, I'm not advocating this as a best practice. Often times I get caught up in just answering the literal question instead trying to understand the use case and offering better interaction design, which I think this might need... – Adam Ayres Mar 16 '11 at 02:00
1

There are multiple ways to solve this problem: 1. Create hidden field, store 12.434234234 in it and display formatted value in textfield. 2. Store original 12.434234234 using jquery.data() and display formatted value in textfield.

anazimok
  • 1,750
  • 2
  • 20
  • 33