Counting characters in a popup textbox

Question

What I need to do is give one of those character counters to let users know how many characters they can enter into a textbox.

The trick, apparently, is that the textbox is on a popup box.

I tried implementing the code found here , but it doesn't seem to be working. No errors or anything, it's just that the number of characters left never changes and I can type well past the supposed limit.

What I have is this:

<!--//**********************************
    // Comment Character Count
    //**********************************  -->
<script type="text/javascript">
     function textCounter(field, countfield, maxlimit) {
     if (field.value.length > maxlimit)
        field.value = field.value.substring(0, maxlimit);
     else
        countfield.value = maxlimit - field.value.length;
     }
 </script>

And then down in my code body I have this:

    <asp:Panel ID="pnl" runat="server" Height="190px" BackColor="#0f6fc6" ScrollBars="Auto">
        <asp:TreeView ID="TreeView1" runat="server" ShowLines="true" PopulateNodesFromClient="false" OnSelectedNodeChanged="TreeView1_PopupCommentsBox" Height="118px" ShowExpandCollapse="true" Font-Size="X-Small" Width="295px" NodeIndent="10" Font-Bold="True" ForeColor="White" ExpandDepth="0"></asp:TreeView>   
        <asp:TextBox ID="txtTreeselect" runat="server" Enabled="False" Visible="False"></asp:TextBox></asp:Panel>
<!--  ************************************  -->
            <asp:modalpopupextender id="MdlCommentsExtender" runat="server"     
                targetcontrolid="TreeView1" popupcontrolid="pnlComments" 
                popupdraghandlecontrolid="PopupHeader" drag="True" 
                backgroundcssclass="ModalPopupBG" Enabled="False"  >
            </asp:modalpopupextender>

            <asp:panel id="pnlComments" style="display: none" runat="server" BackColor="White" CssClass="modalPopup">
                <div class="HellowWorldPopup">
                    <div class="PopupHeader" id="Div3" style="border: thin solid #000000; vertical-align: middle; text-align: center; background-color: #C0C0C0; color: #000000; font-weight: bold; height: 40px;" ><br />Pend Comment</div>
                        <div class="PopupBody" style="background-color: #FFFFFF">
                            <table style="width: 300px">
                                <tr style="text-align:left">
                                    <td style="padding:4px"><asp:Label ID="lblCommentBox" runat="server" Text="Comment:"></asp:Label></td>
                                </tr>
                                <tr>
                                    <td style="padding:4px">
                                   <!--     <asp:TextBox ID="txtCommentBox_Old" runat="server" CssClass="textbox" TextMode="multiline" Wrap="True" Height="70px" Width="270px" Font-Size="Small"></asp:TextBox>  -->
                                        <asp:TextBox ID="txtCommentBox" TextMode="MultiLine" CssClass="textbox" Wrap="True" Height="70px" Width="270px" Font-Size="Small" Rows="3" runat="server" onkeyup="textCounter(txtCommentBox, this.form.remLen, 50);" onkeydown="textCounter(txtCommentBox, this.form.remLen, 50);" />
                                    </td>
                                </tr>  
                                <tr>
                                    <td>
                                        <input readonly="readonly" type="text" id="remLen" name="remLen" size="2" maxlength="3" value="50" /> characters left
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="Controls">
                            <table style="width: 300px">
                                <tr>
                                   <td style="vertical-align: middle; text-align: center"> <asp:Button ID="mdlCmntsOk_Click" runat="server" Text="OK" CssClass="textbox" Height="28px" Width="75px" OnClick="mdlCommentsOk_Click" /></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>  
            </asp:panel>
<!--  ************************************  -->

Can anyone tell me what might be going wrong? Is this not working because it's inside a modalpopupextender?

Answer 1

Change the event attributes to this:

onkeyup="textCounter( this, this.form.remLen, 50);" 
onkeydown="textCounter( this, this.form.remLen, 50);"

You were using a variable name that had no value in that scope. this in an event attribute always refers to the owning node. If you had defined txtCommentBox globally in JavaScript (either in the head or document), then it would be useable there.