Question

I have a jquery function that should count characters the user is typing in ASP.NET textbox. This information will appear on:

<span ID="remaining" class="label">160 characters remaining</span>
<span ID="messages" class="msgleft">1 message(s)</span>   

The jQUery function is shown below:

 <script type="text/javascript">
        $(document).ready(function () {
            var $remaining = $('#remaining'),
        $messages = $remaining.next();

            $('#messagetext').keyup(function () {
                var chars = this.value.length,
            messages = Math.ceil(chars / 160),
            remaining = messages * 160 - (chars % (messages * 160) || messages * 160);

                $remaining.text(remaining + ' characters remaining');
                $messages.text(messages + ' message(s)');
            });
        });
</script>

The ID of the ASP.NET Textbox is messagetext but jQuery function/event is not being fired. When I use HTML text area it works fine. Any idea ?

Answer 1

Try this:

   //.net dynamic ClientID
   $('#<% = messagetext.ClientID %>').keyup(function () {
            var chars = this.value.length,
        messages = Math.ceil(chars / 160),
        remaining = messages * 160 - (chars % (messages * 160) || messages * 160);

            $remaining.text(remaining + ' characters remaining');
            $messages.text(messages + ' message(s)');
        });

or

   //jquery input id wildcard selector
   $("input:[id*=messagetext]").keyup(function () {
            var chars = this.value.length,
        messages = Math.ceil(chars / 160),
        remaining = messages * 160 - (chars % (messages * 160) || messages * 160);

            $remaining.text(remaining + ' characters remaining');
            $messages.text(messages + ' message(s)');
        });