Banner Ad

Showing posts with label Format Number into 2 digits Using Javascript. Show all posts
Showing posts with label Format Number into 2 digits Using Javascript. Show all posts

Wednesday, August 28, 2013

ASP.Net: Format Number into 2 digits Using Java script


               In this post we are going to see that how to formatting the number entered in the server side text box.


<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="Blogging.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        // This function is called when the focus moved from Text Box
        function formatNumber() {
            // Get the Controls value
            var strAmount = document.getElementById("<%=txtAmount.ClientID%>").value;
            // Replace the prefix and suffix spaces
            var dblAmount = strAmount.replace(/^s+|s+$/g, '');
            //check the input is not a empty string
            if (dblAmount != '') {
                // check the input is a valid number
                if (isNaN(dblAmount)) {
                    // Alert the User
                    alert("Please enter only whole number");
                    // Clear the values
                    document.getElementById("<%=txtAmount.ClientID%>").value = "";
                }
                else {
                    // Append zeros
                    var strAmount = dblAmount + "." + "00";
                    //strAmount = strAmount.replace(/^s+|s+$/g, '');
                    document.getElementById("<%=txtAmount.ClientID%>").value = strAmount;
                }
            }
        }
        // Called when the focus set on the Text Box
        function removeZeros() {
            // Get the Controls value
            var strAmount = document.getElementById("<%=txtAmount.ClientID%>").value;
            // Replace the prefix and suffix spaces
            strAmount = strAmount.replace(/^s+|s+$/g, '');
            // Replace the Zeros and Dot
            var dblAmount = strAmount.replace(".00", "");
            //check the input is a valid number
            if (dblAmount != '') {
                // check the input is a valid number
                if (isNaN(dblAmount)) {
                    alert("Please enter only whole number");
                }
                else {
                    // Assign the value to text box
                    document.getElementById("<%=txtAmount.ClientID%>").value = dblAmount;
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    Enter A Whole Number :
    <asp:TextBox ID="txtAmount" runat="server" onblur="formatNumber();" onfocus="removeZeros();">
    </asp:TextBox>
    </form>
</body>
</html>

Let’s have a look at that line:

<asp:TextBox ID="txtAmount" runat="server" onblur="formatNumber();" onfocus="removeZeros();"></asp:TextBox> 

Which declares ASP.Net text box,  with 2 client side events “onblur” and “onfocus”.

Onfocus – used to call a javascript function when the focus set on that control. That is when you click on the text box this will fired.
Onblur – Used to call a javascript function when the focus is moved to next control. When the user press tab key this event triggered.

         In the javascript functions “formatNumber” and “removeZeros” I have used some regular expression to remove the leading and trailing spaces.
I have previously explained the purpose of ClientID in this post.

To run this program, just copy and paste that code in a webform and hit F5.

Please go thru the comments in the javascript for better understanding.

Provide your valuable comments to improve my articles.


Hope this helps a bit!

Connect with Us