Asp.Net Formating Numbers in Text Box, Grid, DataView using JavaScript

There are occasions where we need to format the numbers in Text Boxes, in the EditItemTemplate of GridView, DataList etc, we can achieve this using MaskEdit controls, but these will require additional controls and additional code, we shall see how this can be achieved using JavaScript.

What we are trying to achieve.

Input Format => 10
Output Format => 10.00

Let us now see, how to accomplish this.

Add the required TextBox or Grid/DataView controls to the page.
In the onblur event of the Textbox call a JavaScript function to format the content in the TextBox.

onblur="formatNumber(this);"

Here this refers to the instance of the TextBox, this will be used in the JavaScript function to format the data in the textbox.

The JavaScript function is as follows.


function formatNumber(objTxt)
{
if(isNaN(parseFloat(objTxt.value)))
{
alert('Please enter a valid Number');
objTxt.value = '0.00';
}
else
{
//Converts value 10 into the Format 10.00
objTxt.value = parseFloat(objTxt.value).toFixed(2);
}
}

That's it, the number in the TextBox will get formated, once the focus in moved out of the TextBox.