Displaying text box count on a label

Question

4.00/5 (1 vote)

See more:

Hi all,
I have a asp text box and a label to display the count of characters as so:

XML

<asp:TextBox ID="txtSignature" runat="server" TextMode = "MultiLine"
                   MaxLength="160" ></asp:TextBox>   <asp:Label ID="lblCharacters" runat="server"></asp:Label>

i have put in Jscript functions to display the count:

XML

<script  language ="javascript" type="text/javascript">
    function DisplayCount() {
        var length = document.getElementByID('<%= txtSignature.ClientID %>').value.length;
        document.getElementByID('<%= lblCharacters %>').value = length;
        alert(length);
    }
</script>

The page load event has the following code:

txtSignature .Attributes.Add("javascript:onkeydown();",  "javascript:return DisplayCount();");
txtSignature.Attributes.Add("javascript:onkeypress();", "javascript:return DisplayCount();");

I still cant see teh count on teh label when i type in the textbox. Any one knows what the prob might be?
Thanks.

Posted 30-May-11 21:26pm

AnnSJ

Updated 30-May-11 21:27pm

Toniyo Jackson

v2

Add a Solution

4 solutions

Solution 1

XML

document.getElementByID('<%= lblCharacters %>').innerHTML = length;
document.getElementByID('<%= lblCharacters %>').innertext = length;

Posted 30-May-11 21:32pm

m@dhu

Comments

AnnSJ 31-May-11 3:36am

HI ,
i have tried using both ..it does not work.
when i try to check what properties are available after document.getElementByID('<%= lblCharacters %>'). , innerHTMl and innerText do not even appear.

Sergey Alexandrovich Kryukov 31-May-11 18:39pm

You reproduce OP's spelling error, please see my answer.
--SA

Solution 2

I can see at least one bug: must be document.getElementById (capitalization). Code is case-sensitive, you know…

—SA

Posted 30-May-11 21:35pm

Sergey Alexandrovich Kryukov

Comments

AnnSJ 31-May-11 3:38am

thanks. changed it... but still my label is not showing the count

Sergey Alexandrovich Kryukov 31-May-11 18:44pm

I tested on DIV with innterHTML -- it works. For a label, it innerHTML should work, too.
--SA

Solution 4

Hi Why don't you use JQuery, Its a handy tach in Web.

I just add the following code in the page and it is working, no need to register keydown events in server side.

Just add the reference to the jquery file and get the result.

XML

<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 () {
            $('#txtCount').keydown(function () {
                $('#lblCount').html($(this).val().length + 1);
            });
        });


    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                <asp:TextBox ID="txtCount" runat="server" ></asp:TextBox>
                <asp:Label ID="lblCount" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Posted 30-May-11 21:51pm

tanweer

Updated 30-May-11 21:55pm

v2

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)

Toniyo Jackson · Accepted Answer · 2011-05-30T21:45:00

Solution 3

Just replace your javascript code with this.

<script language="javascript" type="text/javascript">
    function DisplayCount() {
        var length = document.getElementById('<%=txtSignature.ClientID%>').value.length;
        document.getElementById('<%=lblCharacters.ClientID%>').innerText = length;
        alert(length);
    }
    </script>

1) Replace D with d in document.getElementByID. It should be document.getElementById
2) For label you have to use innerText to set the value.

And in page load also change the code like this.

txtSignature.Attributes.Add("onkeypress", "javascript:return DisplayCount();");

Only keypress or keydown is enough.

Posted 30-May-11 21:45pm

Toniyo Jackson

Updated 30-May-11 22:04pm

v3

Comments

AnnSJ 31-May-11 3:52am

i got 2 comments telling me to do the same thng n its still not working..
the thing is i dont even get InnerText as property in the intellisense. could there be anything wrong with my settings

Toniyo Jackson 31-May-11 3:54am

You will not get innerText in intellisense. You just replace your code with my code. It should work.

Toniyo Jackson 31-May-11 4:04am

see my updated answer

Nickos_me 31-May-11 4:27am

Toniyo, thank you! It was my problem too.

But your solution doest't works in FF 4 and I don't know why. And real length is your length+1.
For author - as I remember, MaxLength have no sense when you use TextMode Multiline.

AnnSJ 31-May-11 4:27am

yeah that is what was missing.. now it works.. thanks a million :)

Toniyo Jackson 31-May-11 4:53am

welcome :)