How to convert numbers to currency format using accounting.js

What’s up! I know why you’re here, don’t worry you don’t have to do another Google search because this is just what you need.
Yes, just like what the title sounds like. I’m going to show you how to format numbers using this awesome javascript plugin called accounting.js.

 

Requirements

 

Procedure

To make things different, first I want to show you the first output that we will be having today:

image

If you have just proven to yourself that this is what you need. Then keep on reading, and I’ll show you how to do it.

Second, do the housekeeping:

<script src="jq.js"></script>
<script src="jqnumeric.js"></script>
<script src="accounting.js"></script>

If its your first time here. Housekeeping is similar to getting things ready. So to get things ready, you should include the files that you need into the file that you are going to use for testing.

Next, build the form:

<p>
     <label for="raw_num">Raw Number:</label>
     <input type="text" name="raw_num" id="raw_num">
</p>
<p>
     <label for="form_num">Formatted Number:</label>
     <input type="text" name="form_num" id="form_num" readonly>
</p>

Raw number field is where user input goes. And Formatted number field is where the formatted number goes. When I say formatted number, it has all these stuff:

  • Currency Sign (Peso, Euro, Yen, Dollar, etc..)
  • Separators – comma separators to make the number more readable. To make the value easy to determine.
  • Suffix  – the 2 zeroes which follow the period found at the end of a formatted number (.00)

 

Okay, so we are now going to write the javascript code. First, to limit user input to only numbers. We call the numeric function. Note that this will only work if you have properly included the js numeric file into your working file.

$('#raw_num').numeric();

Next, we need to do something when the user starts typing bunch of numbers on the text field.

$('#raw_num').keyup(function(){
     var raw_num = $(this).val();
     var form_num = accounting.formatMoney(raw_num, "P");
     $('#form_num').val(form_num);
});

On the second line, we just assigned the current value that is in the text field to a variable called raw_num. On the third line, we called the formatMoney function of the accounting js class. Most of the time, it only requires 1 parameter. But if you want to be more specific with what you like then you are free to do so. Here are the arguments, note that the only mandatory argument is the actual number to be formatted:

  • Number to format
  • Prefix
  • Number of zeroes to suffix
  • Separator

Finally, on the fourth line, we just assigned the formatted value to be the value of the formatted number field.

On the example above. We made use of the default settings of accounting.js. Using the letter “P” as the prefix.

I believe you need more than one example. So here’s another example from the site itself. When you look at it, it is self explanatory if you have been coding for a while now.

accounting.formatMoney(4999.99, "€", 2, ".", ","));

But for the sake of those who don’t know, then here’s my explanation. Where 1 is the first argument, and so on.

  1. Number to format
  2. Prefix
  3. Number of zeroes to suffix
  4. Custom Separator
  5. Separator between the actual number and the 2 zeroes used for suffix.

So that if you change the example to:

accounting.formatMoney(4999.99, "€", 2, "-", "/"));

You will end up with something like this:

image

 

Next time, I’ll discuss about how you can unformat the formatted number so that it can be stored in the database and use for computations.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: