Banner Ad

Showing posts with label ASP.Net with Javascript. Show all posts
Showing posts with label ASP.Net with Javascript. Show all posts

Saturday, September 27, 2014

How to disable the “tooltip” for a Asp.net control programmatically?

By Francis   Posted at   12:31 AM   ASP.Net with Javascript No comments
One of the forum member ask this question in the asp.net forum. The answer is yes, we can use a simple javascript to achieve this functionality. Take a look at the below code:
Using Javascript:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function DisableToolTip() {
            // Get the object
            var obj = document.getElementById('LnkBtn');
            // set the tool tip as empty
            obj.title = "";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:LinkButton runat="server" Text="Simple Link Button" ToolTip="Simple Button with Tool Tip" ID="LnkBtn" ClientIDMode="Static" ></asp:LinkButton>
    <a href="#" id="lnkDisable" onclick="DisableToolTip();">Disable Tool Tip</a>
    </form>
</body>
</html>

Using JQuery: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#lnkDisable").click(function () { $('#LnkBtn').attr({'title':''}); });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:LinkButton runat="server" Text="Simple Link Button" ToolTip="Simple Button with Tool Tip" ID="LnkBtn" ClientIDMode="Static" ></asp:LinkButton>
    <a href="#" id="lnkDisable">Disable Tool Tip</a>
    </form>
</body>
</html>

Wednesday, August 28, 2013

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

By Francis   Posted at   1:04 PM   Format Number into 2 digits Using Javascript No comments

               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