NumberFormatter, a jQuery plugin
A common scenario encountered in business applications is to format a number after the user types a number into the textbox. For eg, if the user types 1235, the number should be formatted to 1,235.00. A jQuery plugin called NumberFormatter takes care of this scenario. What is good about the NumberFormatter is that it can format numbers according to the locale specified. The supported locales and minimum documentation is part of the javascript file.
There are two main functions: format() and parse(). format() formats the number with a textbox. parse() is used to convert the formatted number back to the undecorated number format. To illustrate this, we can create a simple calculator that adds two numbers using jQuery. The HTML looks like below:
<fieldset>
<div>
<asp:TextBox ID="txtNum1" runat="server" Text="0"></asp:TextBox>
</div>
<div>
<asp:TextBox ID="txtNum2" runat="server" Text="0"></asp:TextBox>
</div>
<div>
<asp:TextBox ID="txtNum3" runat="server" ReadOnly="true"></asp:TextBox>
</div>
<div>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
</div>
</fieldset>
There is a helper function – formatHandler() that is an event handler. This event handler is triggered when user leaves the textbox. The formatHandler() function formats the value of the text within the textbox when the user leaves the textbox. There is another function calcSum() which is also triggered when the value within the textbox changes. The javascript for the above logic is below:
function formatHandler() {
$(this).format({ format: "#,###.00", locale: "us" });
}
$(document).ready(
function () {
$('input[name$=txtNum1]').change(calcSum);
$('input[name$=txtNum2]').change(calcSum);
$('input[name$=txtNum1]').blur(formatHandler);
$('input[name$=txtNum2]').blur(formatHandler);
calcSum();
});
Finally, there is a function to calculate the sum of the two numbers. This is quite simple. The only catch to this function is because of the NumberFormatter plugin. The NumberFormatter changes the format of the number within the textbox. If you use a parseFloat() function to convert the textbox value into a floating point value, it picks up only the number before the first comma separator. For eg, if your formatted number is 1,235.00, parseFloat() on the textbox will pick only 1. So, the way to deal with this problem is to unformat the value in the textbox, while performing client-side calculations. The parse() method will give the unformatted value of the textbox. This will give a value of 1235 (after removing the formatting). The calcSum() is given below:
function calcSum() {
var rawVal1 = $('input[name$=txtNum1]').parse({ locale: "us" });
var float1 = parseFloat(rawVal1);
var rawVal2 = $('input[name$=txtNum2]').parse({ locale: "us" });
var float2 = parseFloat(rawVal2);
$('input[name$=txtNum3]').val(float1 + float2);
formatFunction($('input[name$=txtNum3]'));
}
function formatFunction(obj) {
obj.format({ format: "#,###.00", locale: "us" });
}
The good thing about NumberFormatter is that the server-side code understands the number formatting very well. The btnSave_Click() event handler can convert the formatted number into a floating point value with a simple float.Parse().
protected void btnSave_Click(object sender, EventArgs e)
{
float float1 = float.Parse(txtNum1.Text);
float float2 = float.Parse(txtNum2.Text);
txtNum3.Text = (float1 + float2).ToString();
}
NumberFormatter is a very good jQuery plugin. It is simple and easy to use. It takes care of the formatting requirements in the browser side. It makes the UI appealing to business applications.
