How to get javascript ‘value’ property for custom textbox control in asp.net

asp.netcustom-controlssharepoint

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.

Custom Control code:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Web.UI.WebControls; 

namespace AjaxServerControlDevelopment 
{ 
    public class MyTextBox: CompositeControl 
    { 
        /// <summary> 
        /// TextBox reference variable 
        /// </summary> 
        public TextBox objTextBox; 


        /// <summary> 
        /// The TextChanged event 
        /// </summary> 
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Design", "CA1009:DeclareEventHandlersCorrectly")] 
        public event EventHandler TextChanged; 

        /// <summary> 
        /// The ButtonClick event 
        /// </summary> 
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Design", "CA1009:DeclareEventHandlersCorrectly")] 
        public event EventHandler<EventArgs> ButtonClick; 


            #region Class constructors 


    /// <summary> 
    /// Default constructor 
    /// </summary> 
    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 
    /// <summary> 
    ///       Gets or sets the Text of TngTextBox 
    /// Returns: 
    ///     A System.String Object. The default value is System.Null 
    /// </summary> 
    public string Text 
    { 

        get 
        { 

                return objTextBox.Text; 

        } 

        set 
        { 

                objTextBox.Text = value; 

        } 


    } 
    #endregion 

      #region ChildControls 
    /// <summary> 
    /// Allows us to attach child controls to our composite control 
    /// </summary> 
    protected override void CreateChildControls() 
    { 
        Controls.Clear(); 
        this.Controls.Add(objTextBox); 
        base.CreateChildControls(); 
    } 
      #endregion 
}

ControlDemo Page Code: 

<head runat="server"> 
<title></title> 
<script type="text/javascript"> 
    function met1() { 
        var objTextBox = document.getElementById('<%=MyTextBox1.ClientID %>'); 
        //alert(objTextBox.children[0].value); 
        alert(objTextBox.value); 
    } 
</script> 


    <cc1:MyTextBox ID="MyTextBox1" runat="server" /> 
    <br /> 

    <asp:Button ID="Button1" OnClientClick="met1();" runat="server" Text="Button" /> 

</form>

In ViewSource of the DemoPage, this control is rendering as a Span Element inside input Element

So I'm getting TextBox value if I write like this 

document.getElementById('<%=MyTextBox1.ClientID%>').children[0].value

How to expose 'value' property like this: document.getElementById('<%=MyTextBox1.CleintID%>').value?

Best Answer

What you are doing is you are trying to get a value of MyTextBox1 which is not a textbox in fact, so it does not have a value.

What to do instead:

Version 1 - change your script to be like this:

<script type="text/javascript"> 
    function met1() { 
        alert('<%=MyTextBox1.Text %>'); 
    } 
</script>

and this is quite enough to have a text in javascript.

Version 2 - add a property to your TextBox class like this:

public TextBox ObjTextBox
{
    get { return objTextBox; }
}

then change your script like this:

<script type="text/javascript"> 
    function met1() { 
        var objTextBox = document.getElementById('<%=MyTextBox1.ObjTextBox.ClientID %>'); 
        alert(objTextBox.value); 
    } 
</script>

this should also work.

I hope this helps!

Related Topic