Member Avatar for vavazoom

Hello,

I am trying to incorporate Javascript with ASP. I want to display in the Label how many characters the client has remaining in the textbox. The Label is not changing at all - any ideas?

<script type="text/javascript">
    function CheckCharCount(textBox, maxLength) {
        var charCount = maxLength - texBox.value.length;
        document.getElementById("lblCharCount").innerText = ";
        if (charCount >= 0) {
            //within limit - display in black
            document.getElementById("lblCharCount").style.color = "black";
        }
        else {
            //negative chars - display in red
            document.getElementById("lblCharCount").style.color = "red";
        }
    }
</script>

<form runat="server">
<div>
    <asp:Label ID="lblCharCount" runat="server">500 Characters Remaining</asp:Label>
    <asp:TextBox ID="textBox" runat="server" Height="53px" TextMode="MultiLine" onkeyup="CheckCharCounter(this, 500)"/>
</div>
</form>

Thanks,

Brittany

  • 2 Contributors
  • 1 Reply
  • 1K Views
  • 25 Minutes Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

first thing you need to do is fix your errors related to references..

For example, line 2 the function should be called "CheckCharCounter", line 2, 'texBox', should be "textBox".

here is a working example without the asp.net controls--html equivalents...

<body>
<div>
    <span id="lblCharCount">Test</span>
    <input id="textBox" onkeyup="CheckCharCounter(this, 5)" />
</div>

<script type="text/javascript">
    function CheckCharCounter(textBox, maxLength) {
       var charCount = maxLength - textBox.value.length;
        if (charCount >= 0) {
            document.getElementById("lblCharCount").style.color = "black";
        }
        else {
            //negative chars - display in red
            document.getElementById("lblCharCount").style.color = "red";
        }
    }
</script>
</body>
Edited by JorgeM
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.