无法在javascript中设置asp.net文本框值

Question

I'm trying to create a simple counter box next to an ASP.NET multi-line textbox. I'm using JavaScript to do this ClientSide.

 <script type="text/javascript">

       function textCounter(maxlimit) {

           var txtField = document.getElementById('<%=txtWhatCompanyDoes.ClientId%>')

           var cntCounter = document.getElementById('<%=txtWhatCompDoesChrsRem%>')

           if (txtField.value.length > maxlimit) {

               txtField.value = txtField.value.substring(0, maxlimit);
           }
           else
           {
               var chrsleft = maxlimit - txtField.value.length;
               cntCounter.value = chrsleft;

           }
       }
    </script>

My page code is;

<asp:TextBox ID="txtWhatCompanyDoes" onKeyUp="textCounter('txtWhatCompanyDoes', 'txtWhatCompDoesChrsRem',2000);" runat="server" TextMode="MultiLine" Rows="10"></asp:TextBox>
                <asp:TextBox ID="txtWhatCompDoesChrsRem" runat="server"></asp:TextBox>

The problem is that it works right up to the last line of the JavaScript as I can use an alert to tell me the number of characters left, but's just not writing the value to the textbox. Am I doing something wrong?

Answer 1

Try adding client id on line 4 at the end of txtWhatCompDoesChrsRem

       function textCounter(maxlimit) {

           var txtField = document.getElementById('<%=txtWhatCompanyDoes.ClientId%>')

           var cntCounter = document.getElementById('<%=txtWhatCompDoesChrsRem.ClientId%>')

           if (txtField.value.length > maxlimit) {

               txtField.value = txtField.value.substring(0, maxlimit);
           }
           else
           {
               var chrsleft = maxlimit - txtField.value.length;
               cntCounter.value = chrsleft;

           }
       }
    </script>

Answer 2

Wow, how emabarassing. I can't believe I missed that. Can I be cheeky and ask how this can be made dynamic for multiple counter boxes on one page eg

<script type="text/javascript">

   function textCounter(field, cntField, maxlimit) {

       var txtField = document.getElementById(field)

       var cntCounter = document.getElementById('<%=txtWhatCompDoesChrsRem.Clientid%>')

       if (txtField.value.length > maxlimit) {

          txtField.value = txtField.value.substring(0, maxlimit);
       }
       else
       {
          var chrsleft = maxlimit - txtField.value.length;

          cntCounter.value = chrsleft;

       }
    }
    </script>




<asp:TextBox ID="txtWhatCompanyDoes" onKeyUp="textCounter(this.id, txtWhatCompDoesChrsRem',2000);" runat="server" TextMode="MultiLine" Rows="10"></asp:TextBox>
    <asp:TextBox ID="txtWhatCompDoesChrsRem" runat="server"></asp:TextBox>

I can pass the first control id using "this.id" but how can I pass the counter box as a variable?

Answer 3

This only way I could solve this was to set the counter box as an rather than an ASP textbox.

<asp:TextBox ID="txtWhatCompanyDoes" onKeyUp="textCounter(this.id, this.form.txtWhatCompDoesChrsRem, 2000);" runat="server" TextMode="MultiLine" Rows="10"></asp:TextBox>
 <input name="txtWhatCompDoesChrsRem" type="text" value="2000" />

Answer 4

every element in asp.net have inherit id like "txtWhatCompDoesChrsRem.Clientid"

so when u want to use some element in java script u can simply add one line to the element :

<asp:TextBox id="txt1" ClientID="static" ... 

thats mean u can use the element directly by his name

java script :

var txtField = document.getElementById("txt1")