title: How to get javascript 'value' property for custom textbox control in asp.net
body: <p>I created one custom control which contains TextBox as a child control (and contains some other controls also). After this I placed this control in a Page and I'm trying to get TextBox value(i.e text) through javascript. But I'm unable to get 'value' property directly.</p>
  
  <p><strong>Custom Control code:</strong></p>
  
  <pre><code>using System; 
  using System.Collections.Generic; 
  using System.Linq; 
  using System.Text; 
  using System.Web.UI.WebControls; 
  
  namespace AjaxServerControlDevelopment 
  { 
      public class MyTextBox: CompositeControl 
      { 
          /// &lt;summary&gt; 
          /// TextBox reference variable 
          /// &lt;/summary&gt; 
          public TextBox objTextBox; 
  
  
          /// &lt;summary&gt; 
          /// The TextChanged event 
          /// &lt;/summary&gt; 
          [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Design", "CA1009:DeclareEventHandlersCorrectly")] 
          public event EventHandler TextChanged; 
  
          /// &lt;summary&gt; 
          /// The ButtonClick event 
          /// &lt;/summary&gt; 
          [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Design", "CA1009:DeclareEventHandlersCorrectly")] 
          public event EventHandler&lt;EventArgs&gt; ButtonClick; 
  
  
              #region Class constructors 
  
  
      /// &lt;summary&gt; 
      /// Default constructor 
      /// &lt;/summary&gt; 
      public MyTextBox() 
      { 
          ////Instantiates the wrapped control 
  
          objTextBox = new TextBox(); 
  
          objTextBox.TextChanged += new EventHandler(objTextBox_TextChanged); 
  
  
      } 
          #endregion 
  
      void objTextBox_TextChanged(object sender, EventArgs e) 
      { 
          if (TextChanged != null) 
          { 
              TextChanged(this, e); 
          } 
      } 
  
  
      #region Property:Text 
      /// &lt;summary&gt; 
      ///       Gets or sets the Text of TngTextBox 
      /// Returns: 
      ///     A System.String Object. The default value is System.Null 
      /// &lt;/summary&gt; 
      public string Text 
      { 
  
          get 
          { 
  
                  return objTextBox.Text; 
  
          } 
  
          set 
          { 
  
                  objTextBox.Text = value; 
  
          } 
  
  
      } 
      #endregion 
  
        #region ChildControls 
      /// &lt;summary&gt; 
      /// Allows us to attach child controls to our composite control 
      /// &lt;/summary&gt; 
      protected override void CreateChildControls() 
      { 
          Controls.Clear(); 
          this.Controls.Add(objTextBox); 
          base.CreateChildControls(); 
      } 
        #endregion 
  }
  </code></pre>
  
  <p><strong>ControlDemo Page Code:</strong> </p>
  
  <pre><code>&lt;head runat="server"&gt; 
  &lt;title&gt;&lt;/title&gt; 
  &lt;script type="text/javascript"&gt; 
      function met1() { 
          var objTextBox = document.getElementById('&lt;%=MyTextBox1.ClientID %&gt;'); 
          //alert(objTextBox.children[0].value); 
          alert(objTextBox.value); 
      } 
  &lt;/script&gt; 
  </code></pre>
  
  <p> 
   
       </p>
  
  <pre><code>    &lt;cc1:MyTextBox ID="MyTextBox1" runat="server" /&gt; 
      &lt;br /&gt; 
  
      &lt;asp:Button ID="Button1" OnClientClick="met1();" runat="server" Text="Button" /&gt; 
  
  &lt;/form&gt; 
  </code></pre>
  
  <p></p>
  
  <p>In ViewSource of the DemoPage, this control is rendering as a <code>Span Element</code> inside <code>input Element</code></p>
  
  <p>So I'm getting TextBox value if I write like this </p>
  
  <pre><code>document.getElementById('&lt;%=MyTextBox1.ClientID%&gt;').children[0].value
  </code></pre>
  
  <p>How to expose 'value' property like this:  document.getElementById('&lt;%=MyTextBox1.CleintID%>').value?</p>