Using jQuery to display a value to 2 decimal places in an input box while retaining more precision

Question

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.

Solution 1

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

Solution 2

num = 12.434234234;
result = num.toFixed(2); // returns 12.43

Solution 3

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);
    });
});

Solution 4

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.

View more solutions

Comments

[Brandon Boone]

What kind of interaction does the user have with these numbers? Why is it important to retain precision?

[John Hunt]

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]

But my client also doesn't want the app to display that kind of precision because it looks ugly :p

[mgiuca]

You may as well use a variable rather than creating a whole hidden field for this purpose.

[weltraumpirat]

Text inputs are usually used for HTML forms. Where would you retain that variable for further processing?

[mgiuca]

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.

[John Hunt]

The old switcharoo, I like it!

[Adam Ayres]

@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...