The javascript does not execute

Question

I have a javascript function that count the number of characters entered into an asp:TextBox.

I set it to 15 characters for testing and put an alertBox in it, but it does not work.

The JavaScript is not executing at all.

I have tried placing the field names in <%= %> blocks but the code still does not fire.

Here my code:

Asp Code

<%@ Page Title="Contact Us" Language="vb"  MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Contact.aspx.vb" Inherits="HosJun.Contact" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
   <script src="Scripts/jquery-1.4.1.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
   <table width="900" border="0" cellspacing="0" bordercolor="#333366" >
      <tr>
         <td width="900"  valign="top" >
            <div id="middle">
            <div id="middlebox2">
            <table width="96%" border="0" align="center" cellpadding="3" cellspacing="3">
            </table>
            <form id="form1" >
               <table align="center" style="width: 322px">
                  <tr>
                     <td>
                        <asp:Label ID="lblContactMainName" class="lblC" runat="server" Text="Your Name:"></asp:Label>
                     </td>
                     <td class="auto-style4">
                        <asp:TextBox ID="txtContactMainName" runat="server" Width="210px"></asp:TextBox>
                     </td>
                     <td align="left">
                        <asp:RequiredFieldValidator ID="valContactName" runat="server" ErrorMessage="You must enter a contact name" Font-Bold="True" ForeColor="#E46A18" ControlToValidate="txtContactMainName">*</asp:RequiredFieldValidator>
                     </td>
                  </tr>
                  <tr>
                     <td>
                        <asp:Label ID="lblContactMainEmail"  class="lblC" runat="server" Text="Your Email:"></asp:Label>
                     </td>
                     <td class="auto-style4">
                        <asp:TextBox ID="txtContactMainEmail" runat="server" Width="210px" ControlToValidate="txtContactMainEmail"></asp:TextBox>
                     </td>
                     <td align="left">
                        <asp:RequiredFieldValidator ID="valContactEmail" runat="server" ErrorMessage="Please enter a valid email address" Font-Bold="True" ForeColor="#E46A18" ControlToValidate="txtContactMainEmail">*</asp:RequiredFieldValidator>
                     </td>
                  </tr>
                  <tr>
                     <td>
                        <asp:Label ID="lblContactMainSubject"  class="lblC" runat="server" Text="Subject:"></asp:Label>
                     </td>
                     <td class="auto-style4">
                        <asp:DropDownList ID="ddlContactMainSubject" runat="server" Width="215px">
                           <asp:ListItem>FeedBack on a room</asp:ListItem>
                           <asp:ListItem>FeedBack on the Site</asp:ListItem>
                           <asp:ListItem>Suggest a Site</asp:ListItem>
                           <asp:ListItem>Other</asp:ListItem>
                        </asp:DropDownList>
                     </td>
                  </tr>
               </table>
               <table align="center" style="width: 364px">
                  <tr>
                     <td align="left"><span>Comment:</span></td>
                  </tr>
                  <tr>
                     <td align="left" >
                        <asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine" Height="70px" Width="356px"></asp:TextBox>
                        <br />  
                        (<span id="spanComment">15 Characters left</span>)  
                     </td>
                  </tr>
                  <tr>
                     <td align="center" class="auto-style3">
                        <asp:Label ID="lblCaptchaResult" runat="server" Width="356px" Text="Enter the CAPTCHA code below." Height="18px"></asp:Label>
                     </td>
                  </tr>
                  <tr>
                     <td align="center" valign="middle" class="auto-style3">
                        <center style="width: 357px">
                           <asp:TextBox runat="server" ID="txtImg" width="90" valign="top" style="margin-left: 0px" ></asp:TextBox>
                           <asp:Image ID="imgCaptcha" runat="server" valign="top" ></asp:Image>
                        </center>
                     </td>
                  </tr>
                  <tr>
                     <td align="center" class="auto-style3">
                        <center style="width: 355px">
                           <asp:Button ID="Button1" runat="server" autopostback="true" Text="Submit" />
                        </center>
                     </td>
                  </tr>
               </table>
   </table>
   </form>
</asp:Content>

JavaScript Code

<script src="Scripts/jquery-1.4.1.js"></script>
   <script type="text/javascript">
      //Checking Description Length  
      $('txtComment').keyup(function () {
          alert('Alert');
          var Description = $('txtComment').val();
          var Descriptionlen = Description.length;
          if (Description.length >= 15) {
              this.value = this.value.substring(0, 15);
          }
          $('#spanComment').text(15 - Descriptionlen + ' Characters Left');
      });
      });
   </script>

Any ideas on what I'm doing wrong? This is driving me insane!

Have you included the jQuery file somewhere? I mean in master page? — Rahul Singh
– Rahul Singh, Commented Nov 3, 2015 at 18:05
$('txtComment') <--- That is an element selector and hopefully your code is running at the end of the body. — epascarello
– epascarello, Commented Nov 3, 2015 at 18:11

Delta · Accepted Answer · 2015-11-03 18:24:49Z

1

You are getting the txtComment control in the wrong way. Try this script where I have replaced txtComment with <%= txtComment.ClientID %>

<script type="text/javascript">
$(document).ready(function() {
  $('#<%= txtComment.ClientID %>').keyup(function () {
    alert('Alert');
    var Description = $('#<%= txtComment.ClientID %>').val();
    var Descriptionlen = Description.length;
    if (Description.length >= 15) {
      this.value = this.value.substring(0, 15);
    }
    $('#spanComment').text(15 - Descriptionlen + ' Characters Left');
  });
});
</script>

edited Nov 3, 2015 at 18:24

answered Nov 3, 2015 at 18:06

Delta

1711 silver badge12 bronze badges

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

2 Comments

Andrei Over a year ago

The only answer in the thread to address all problems. Worth noting though that it will work only of the javascript is defined on the aspx page (and not in a separate file)

Omar Sabu Over a year ago

This did it. It works now. I could swear I tried the '#<%= txtComment.ClientID %>' but I did not use $(document).ready(function(){ Thank you for answering this question.

Tim · Accepted Answer · 2015-11-03 18:07:15Z

0

Instead of

 $('txtComment')

Try using:

$('<%= txtComment.ClientID %>') //UniqueID is another option

The IDs you're rendering are not the same as you think they are in the codebehind - open up Firebug or your developer console and you'll see what I mean.

answered Nov 3, 2015 at 18:07

Tim

4,10910 gold badges39 silver badges64 bronze badges

Comments

hecnabae · Accepted Answer · 2015-11-03 18:10:17Z

0

If you use id selector you must use the character "#" as prefix for control id. Try with

> $('#txtComment').keyup(function () {...});

answered Nov 3, 2015 at 18:10

hecnabae

4074 silver badges21 bronze badges

Comments

Seano666 · Accepted Answer · 2015-11-03 18:11:25Z

0

Looks like your script is probably trying to execute before the dom is ready. Try this

$(document).ready(){
    //Checking Description Length  
    $('txtComment').keyup(function () {
        alert('Alert');
        var Description = $('txtComment').val();
        var Descriptionlen = Description.length;
        if (Description.length >= 15) {
            this.value = this.value.substring(0, 15);
        }
        $('#spanComment').text(15 - Descriptionlen + ' Characters Left');
    });
}

answered Nov 3, 2015 at 18:11

Seano666

2,2381 gold badge16 silver badges14 bronze badges

Collectives™ on Stack Overflow

The javascript does not execute

Asp Code

JavaScript Code

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Asp Code

JavaScript Code

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related