Jquery masking code not working Why?

Question

1.00/5 (1 vote)

See more:

I have a Web form that I am trying to mask a textbox. I have VS2010, ASP.Net using C#. On the web form I have a textbox, lables and a button. On the code side of that page in css I have the jquery code to mask the textbox. When I debug the code to test it out there are no errors and the textbox doesn't work. What did I do wrong? I am new to jquery. Here is the Css HTML code:

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Testcommas.aspx.cs" Inherits="TestNumberCommas.Testcommas" %>

<!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>jQuery Masked Input Demo</title>
    <script src="Scripts/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-2.1.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-2.1.1.min.map" type="text/javascript"></script>
    <script src="Scripts/jquery.maskedinput-1.3.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.maskedinput-1.3.1.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
            $("#TextBoxY").mask("999,999,999,999");
        });

    </script>

    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 245px;
        }
        .style3
        {
            width: 66px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="TextBoxY" runat="server" Width="180px" 
                    AutoCompleteType="Email" ClientIDMode="Static" 
            style="text-align: right"></asp:TextBox>
    </div>
    <table class="style1">
        <tr>
            <td class="style3">
                 </td>
            <td class="style2">
                 </td>
            <td>
                <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" 
                    Width="100px" />
            </td>
        </tr>
        <tr>
            <td class="style3">
                Hourly</td>
            <td class="style2">
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style3">
                Yearly</td>
            <td class="style2">
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style3">
                 </td>
            <td class="style2">
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style3">
                 </td>
            <td class="style2">
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style3">
                 </td>
            <td class="style2">
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style3">
                 </td>
            <td class="style2">
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style3">
                 </td>
            <td class="style2">
                 </td>
            <td>
                 </td>
        </tr>
    </table>
    </form>
</body>
</html>

Posted 11-Jul-14 2:45am

Computer Wiz99

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2014-07-11T03:17:00

You haven't mentioned which plugin you're using - I'm assuming it's this one[^].

HTML

<script src="Scripts/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.1.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.1.1.min.map" type="text/javascript"></script>

You've included the jQuery script three times, and included the source mapping which isn't needed. Replace those four lines with:

HTML

<script src="Scripts/jquery-2.1.1.min.js" type="text/javascript"></script>

HTML

<script src="Scripts/jquery.maskedinput-1.3.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.maskedinput-1.3.1.min.js" type="text/javascript"></script>

You've included both the normal and minified versions of the plugin script. Replace those two lines with:

HTML

<script src="Scripts/jquery.maskedinput-1.3.1.min.js" type="text/javascript"></script>

Make sure you have the correct path for the "Scripts" folder relative to the page, and that it contains both the jquery-2.1.1.min.js and jquery.maskedinput-1.3.1.min.js files.

Check your browser's script console for any script errors.

Make sure your AppPool is set to use .NET 4.0, otherwise the ClientIDMode property won't work.

I've just tried your code locally, and it works.