locked
How to get text box ID RRS feed

  • Question

  • User1150900820 posted

    Hello:

    I've inherited TextBox class and added some script.

    1    public class MyTextBox : TextBox
    2        {
    3            private TextBox _txtBox = null;      
    4            public TextBox txtBox
    5            {
    6                get
    7                {
    8                    if (_txtBox == null)
    9                        _txtBox = new TextBox();
    10                   return this._txtBox;
    11               }
    12           }
    13   
    14           protected override void Render(HtmlTextWriter writer)
    15           {            
    16               txtBox.TextMode = TextBoxMode.MultiLine;
    17                           
    18               /// Calls the javascript event
    19               txtBox.Attributes.Add("onkeyup", "IncreaseHeight();");
    20               string script = @"<script language='javascript' type='text/javascript'>
    21   										    function IncreaseHeight()
    22                                               {
    23                                                 var tb = document.getElementById('" + txtBox.ID + "');"
    24                                                 + "var maxLength = 30;"
    25                                                 + "var currentLength = tb.value.length;"
    26                                                 + "var row = currentLength / maxLength;"
    27                                                 + "tb.rows = row+1;"
    28                                             + "}"
    29                                  + "</script>";
    30               
    31               /// Register the script as startup script            
    32               if (!this.Page.ClientScript.IsStartupScriptRegistered("Lib_Raz_MyTextBox"))
    33               {
    34                   this.Page.ClientScript.RegisterStartupScript(typeof(string), "Lib_Raz_MyTextBox", script);
    35               }
    36   
    37               this.txtBox.RenderControl(writer);            
    38               //base.Render(writer);
    39           }
    40       }    
    

    How can get the text box id

    <td>

    <Raz_MyTextBox:MyTextBox ID="mytxtBox1" runat="server"> </Raz_MyTextBox:MyTextBox></td>

    myTextBox1 form the control class...????

    Control can be placed several times on the page.

    Need help.

    Tuesday, March 18, 2008 4:41 AM

All replies

  • User2032526919 posted

    Hi,

    the ID for scripting is got from ClientID property.

    Tuesday, March 18, 2008 4:55 AM
  • User2008424322 posted

    Hi,

    string script = @"&lt;script language='javascript' type='text/javascript'> 21 function IncreaseHeight() 22 { 23 var tb = document.getElementById('" + txtBox.ID + "');" 24 + "var maxLength = 30;" 25 + "var currentLength = tb.value.length;" 26 + "var row = currentLength / maxLength;" 27 + "tb.rows = row+1;" 28 + "}" 29 + "&lt;/script>";


    Instead of txtBox.ID use txtBox.ClientID.
    Tuesday, March 18, 2008 5:00 AM
  • User1150900820 posted

    Hello:

    It's not wroking. I've changed the line

    var tb = document.getElementById('" + txtBox.ClientID + "');"

    But when I see the view source the inline is something like this:
    1    <table>
    2                <tr>
    3                    <td>
    4                        <textarea rows="2" cols="20" onkeyup="IncreaseHeight();"></textarea>    <-----!!! Text Box ID disappears !!!----->
    5                    </td>
    6                    <td>
    7                        <textarea rows="2" cols="20" onkeyup="IncreaseHeight();"></textarea></td>
    8                </tr>
    9            </table>
    10   
    11   <script language='javascript' type='text/javascript'>
    12                 function IncreaseHeight(this)
    13                                               {
    14                                                 var tb = document.getElementById(''); <!!!--- No Id found ---!!!>
    			    var maxLength = 30;var currentLength = tb.value.length;var row = currentLength / maxLength;tb.rows = row+1;}</script>
    15   
    

     Though I set the text box

    ID="myTextBox"

     but it disappears and gives an error object expected.

    Can anyone tell me why this is happening....?????

    Razin

    Tuesday, March 18, 2008 11:14 PM
  • User2032526919 posted

    TextBox must be added to Controls collection for it to get ID hierarchy. In the property you just instantiate it. Do you add it to Controls collection at some point?

    Wednesday, March 19, 2008 3:34 AM
  • User-1136466523 posted

    Hi,

    From your description, it seems that what you want is to get the server control in javascript, right?

    Here, you mentioned that you assigned “ID="myTextBox"” in your control, but it’s the server control id, not the client id.

    For example, here’s a textbox server control.

    <asp:TextBox id="Test" Text="Sample" runat="server">

    You can access this value in a couple ways using JavaScript:

    document.getElementById('<%=Test.ClientID%>').value;

    ClientID - server control identifier generated by ASP.NET

    Or

    document.forms[0]['Test'].value;

    Thanks.

    Wednesday, March 19, 2008 9:58 PM
  • User1150900820 posted

    U r right. How can i do that? Can u give an example...???

    Razin

    Thursday, March 20, 2008 12:53 AM
  • User-1559919801 posted

    First of all you have to use 'ClientId' property of the textbox, because on rendered page clientID changes if you put textbox in contenplaceholder or panel. 

    Second you writing the script wrong;

    txtBox.Attributes.Add("onkeyup", "IncreaseHeight();");

    the above line should be written like this;

    txtBox.Attributes.Add("onkeyup", "IncreaseHeight(' " + this.ClientID + " ');");

    Be careful with inverted comma and apostrophe.

    Now your script will be like this;

    string script = @"&lt;script language='javascript' type='text/javascript'>
    function IncreaseHeight(controlID)
    {
       var tb = document.getElementById(controlID
    );"
       + "var maxLength = 30;"
       + "var currentLength = tb.value.length;"
       + "var row = currentLength / maxLength;"
       + "tb.rows = row+1;"
       + "}"
       + "&lt;/script>";

    Check for bold and Undeline changes.

    For more information on this topic check the following links;

    http://www.themastech.net/Tutorials/ValidationTextBox/Default.aspx?fn=Part 3

    http://www.themastech.net/Tutorials/ValidationTextBox/Default.aspx?fn=Part 4

    Thursday, March 20, 2008 1:33 PM
  • User1150900820 posted

    Hi:

    I've modified my code. The class now can find the ID but the ID i've set in the inline disappears.

    This is HTML code:

    <table>

    <tr>

    <td>

    <Raz_DynamicTextBox:DynamicTextBox ID="hello" runat="server"></Raz_DynamicTextBox:DynamicTextBox></td>

    </tr>

    </table>

     ID is hello.

    Whenever I view source the ID disappears:

    <table>
                <tr>
                    <td>
                        <textarea rows="2" cols="20" onkeyup="IncreaseHeight(hello);"></textarea></td>     ///No Id    
                </tr>
            </table>

    As a result it says:

    <textarea rows="2" cols="20" onkeyup="IncreaseHeight(hello);">   /// hello is undefined

    I need help.

    Razin

    Sunday, March 23, 2008 12:01 AM