How to unformat and save formatted numbers using accounting.js

Okay, so this is part 2 of the tutorial that I have written yesterday on the basic usage of accounting.js.

How to convert numbers to currency format using accounting.js

This time I’m going to show you how you can unformat those formatted numbers so that it can be stored in the database. I’m also going to show you how to save the data using ajax.

Since this is the second part of an existing tutorial. The requirements are still the same. You only need to install a database server like Wampserver if you want to have a database where you can save data.

We have a few changes on the markup. If you followed along in the first part its better if you just create a new file.

<p>
<label for="raw_num">Raw Number 1:</label>
     <input type="text" name="raw_num" id="raw_num">
</p>
<p>
     <label for="raw_num">Raw Number 2:</label>
     <input type="text" name="raw_num2" id="raw_num2">
</p>
<p>
     <label for="raw_num">Raw Number 3:</label>
     <input type="text" name="raw_num3" id="raw_num3">
</p>
<p>
     <label for="form_num">Formatted Number 1:</label>
     <input type="text" name="form_num" id="form_num" class="formnum">
</p>
<p>
     <label for="form_num">Formatted Number 2:</label>
     <input type="text" name="form_num2" id="form_num2" class="formnum">
</p>
<p>
     <label for="form_num">Formatted Number 3:</label>
     <input type="text" name="form_num3" id="form_num3" class="formnum">
</p>
<p>
     <input type="button" id="btn_save" value="save">
</p>

Does the markup suggests anything to you? To kill the question, yes were going to make use of arrays here in order to capture all the values in the text fields which has the formnum class. Formnum is short for formatted number.
As the name suggest, the one and only button in the markup is used for saving the data into the database.

Next is the script itself.
First, ensure that the user only gets to input numbers:

$('#raw_num, #raw_num2, #raw_num3').numeric();

Then format the raw numbers. Nothing new here, we just repeated what we did on the first tutorial.

$('#raw_num').keyup(function(){
	var raw_num = $(this).val();
	var form_num = accounting.formatMoney(raw_num);
	$('#form_num').val(form_num);
});
	
$('#raw_num2').keyup(function(){
	var raw_num = $(this).val();
	var form_num = accounting.formatMoney(raw_num);
	$('#form_num2').val(form_num);
	});
	
$('#raw_num3').keyup(function(){
	var raw_num = $(this).val();
	var form_num = accounting.formatMoney(raw_num);
	$('#form_num3').val(form_num);
});

Finally, the action to be performed when the user clicks on the save button. To explain things, on the 2nd line, we just declared an array called raw_num in which the unformatted numbers will be stored. On the 3rd line (Whitespaces isn’t considered a line), we loop through each of the elements which has a class of formnum. Then we used the unformat method of accounting.js to turn the number back to its raw form. Then on the 6th line, we called the jquery’s $.post function. The $.post function is a simpler version of the $.ajax function. Which only requires a minimum of 2 arguments, one is the php file that would talk to the server, and the second is the variable that you’re going to pass on to that php file. In this case we want the array of unformatted numbers to be the variable that’s going to be passed.

$('#btn_save').click(function(){
     var raw_num = [];
	
     $('.formnum').each(function(index){
	raw_num[index] = accounting.unformat($(this).val());
     });
	
     $.post('save.php',{'raw' : raw_num});
});

 

Maybe you’re wondering why do I still bother unformatting the number if there is already an unformatted version of that number. My answer would be yes, there’s really no purpose in formatting the number then unformatting it again if there exist a copy of the unformatted number.
But what if there’s none? What if the formatted version of the number should also be placed wherever the original number is.

And I almost forgot what the heck is save.php. Well save.php will be the one who talks to mysql. Saying: “could you please save this bunch of numbers into your database?“ Here’s what it contains. What we did here was to loop through the contents of $_POST[‘raw’]. ‘Raw’ is the name of the variable that we assigned in the javascript earlier.

<?php
require_once('randomconfig.php');

foreach($_POST['raw'] as $num){
	$db->query("INSERT INTO accounting_js SET numbers='$num'");
}
?>

 

Conclusion
Accounting.js is indeed a very nice tool for number formatting. But there are more features which aren’t discussed here, so you might as well check out the official site for more information regarding accounting.js.
Aside from accounting.js I also showed you how to loop through elements containing data, and save data into the database using jquery’s $.post method.

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: