ASP.NET jQuery not working

Question

I am trying to create some numeric only textboxes, this works when tested on JSfiddle but not in my ASP.NET project. code:

Master Page head:

<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery.fn.ForceNumericOnly =
            function () {
                return this.each(function () {
                    $(this).keydown(function (e) {
                        var key = e.charCode || e.keyCode || 0;
                        return (
                        key == 8 ||
                        key == 9 ||
                        key == 46 ||
                        key == 110 ||
                        key == 190 ||
                        (key >= 35 && key <= 40) ||
                        (key >= 48 && key <= 57) ||
                        (key >= 96 && key <= 105));
                    });
                });
            };

    $('input[id$=varA]').ForceNumericOnly();
    $("#varB").ForceNumericOnly();
    $("#varC").ForceNumericOnly();
 </script>

Default Web Form inside Main content placeholder:

    <div id="addition" runat="server">
    <p>
    Input variable a : <asp:TextBox runat="server" ID="varA"></asp:TextBox><br /><br />
    Input variable c : <asp:TextBox runat="server" ID="varB"></asp:TextBox><br /><br />
    Input variable b : <asp:TextBox runat="server" ID="varC"></asp:TextBox><br /><br />
    <asp:Button ID="additionSubmit" runat="server" Text="Submit"  
            onclick="additionSubmit_Click" /><br /><br />
     <asp:Label ID="lblAddition" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

You are including jQuery twice, remove the jquery-1.4.1.min.js line — Stefan P.
– Stefan P., Commented Jul 8, 2013 at 9:50

Adrian Wragg · Accepted Answer · 2013-07-08 09:54:09Z

1

Other answers already mention wrapping this in document.ready; that sorts out part of the problem.

Be aware also that ASP.net may alter the IDs of your textboxes. You've catered for this in the first:

$('input[id$=varA]').ForceNumericOnly();

but not the other two. You could also assign them specific CSS classes (which ASP.net won't alter), or set the ClientIDMode to 'Static':

<div id="addition" runat="server">
    <p>
        Input variable a : <asp:TextBox ClientIDMode="Static" runat="server" ID="varA"></asp:TextBox><br /><br />
        Input variable c : <asp:TextBox ClientIDMode="Static" runat="server" ID="varB"></asp:TextBox><br /><br />
        Input variable b : <asp:TextBox ClientIDMode="Static" runat="server" ID="varC"></asp:TextBox><br /><br />
        <asp:Button ID="additionSubmit" runat="server" Text="Submit"  
            onclick="additionSubmit_Click" /><br /><br />
        <asp:Label ID="lblAddition" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

answered Jul 8, 2013 at 9:54

Adrian Wragg

7,4193 gold badges29 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1986761 Over a year ago

Thanks, this worked. Ended up using CSS classes like you suggested as I had more than 3 textboxes in the same page.

Jonathan Naguin · Accepted Answer · 2013-07-08 09:50:12Z

0

You have to wait until your DOM is really ready to execute your script. Try with:

$(document).ready(function() {
    $('input[id$=varA]').ForceNumericOnly();
    $("#varB").ForceNumericOnly();
    $("#varC").ForceNumericOnly();
});

answered Jul 8, 2013 at 9:50

Jonathan Naguin

14.8k7 gold badges52 silver badges76 bronze badges

Comments

Habibillah · Accepted Answer · 2013-07-08 09:52:00Z

0

Try modify your script to become:

$(document).ready(function() {
   $('input[id$="varA"]').ForceNumericOnly();
   $('input[id$="varB"]').ForceNumericOnly();
   $('input[id$="varC"]').ForceNumericOnly();
});

answered Jul 8, 2013 at 9:52

Habibillah

28.8k5 gold badges40 silver badges59 bronze badges

Comments

marc_s · Accepted Answer · 2017-02-12 19:49:39Z

Here is working solution, use only one jQuery library.

Use $(document).ready and use ClientID in jQuery like <%= VarA.ClientID %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery.fn.ForceNumericOnly =
            function () {
                return this.each(function () {
                    $(this).keydown(function (e) {
                        var key = e.charCode || e.keyCode || 0;
                        return (
                        key == 8 ||
                        key == 9 ||
                        key == 46 ||
                        key == 110 ||
                        key == 190 ||
                        (key >= 35 && key <= 40) ||
                        (key >= 48 && key <= 57) ||
                        (key >= 96 && key <= 105));
                    });
                });
            };
            $(document).ready(function () {
                $('#<%= varA.ClientID %>').ForceNumericOnly();
                $("#<%= varB.ClientID %>").ForceNumericOnly();
                $("#<%= varC.ClientID %>").ForceNumericOnly();
            });
    </script>
</head>
<body>
    <form runat="server">
    <div id="addition" runat="server">
        <p>
            Input variable a :
            <asp:TextBox runat="server" ID="varA"></asp:TextBox><br />
            <br />
            Input variable c :
            <asp:TextBox runat="server" ID="varB"></asp:TextBox><br />
            <br />
            Input variable b :
            <asp:TextBox runat="server" ID="varC"></asp:TextBox><br />
            <br />
            <asp:Button ID="additionSubmit" runat="server" Text="Submit" onclick="additionSubmit_Click"/><br />
            <br />

            <asp:Label ID="lblAddition" runat="server" Text="" CssClass="label"></asp:Label>
        </p>
    </div>
    </form>
</body>
</html>

Collectives™ on Stack Overflow

ASP.NET jQuery not working

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related