This code doesn't display the value, I don't know why?

I have server control:

<asp:TextBox ID="txtTest" runat="server" Visible="false" TextMode="MultiLine"
                    Rows="3" Columns="23" CssClass="white-scroll" />

in javascript function:

var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);

I enter text then click on button that call the javascript function, but the alert box doesn't display the entered text.

EDIT: when I initialize the text with Text="some text", it is displayed in alert, I want to enter text in client side and get the value of it in the Javascript function.

Thanks

This code doesn't display the value, I don't know why?

I have server control:

<asp:TextBox ID="txtTest" runat="server" Visible="false" TextMode="MultiLine"
                    Rows="3" Columns="23" CssClass="white-scroll" />

in javascript function:

var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);

I enter text then click on button that call the javascript function, but the alert box doesn't display the entered text.

EDIT: when I initialize the text with Text="some text", it is displayed in alert, I want to enter text in client side and get the value of it in the Javascript function.

Thanks

• c#
• javascript
• asp

• What do the alert display? or is there any javascript error? – Waqas Raja Commented Jul 2, 2011 at 5:03
• The TextBox is Visible="false" it means it is hidden then where did you entered Text? – Waqas Raja Commented Jul 2, 2011 at 5:40
• it set to true in another control, this is a part of other code – Shimaa Commented Jul 2, 2011 at 9:29

5 Answers 5

Using label or textbox visible set false so it can access the value in JavaScript

Sol

1)

Make a div and set style="display:none;" so label is not display at UI(browser) but value can access in JavaScript.

This is because you server Control is called "txtTest" not "txtEventDescription"

change your javascript function to :

var eventText = document.getElementById('<%=txtTest.ClientID%>').value; 
alert (eventText);

EDIT: ok, I see you've now changed the post to show the code and renamed the js control, so above is no longer relevant (for those who are confused by my answer) :-)

The problem is the Visible="false" - this control will not render into the client and will therefore not be accessible via javascript (as the HTML element does not exist client side)

So, hide the element using CSS and then call alert on it. Sample snippet

CSS

.hide-element {
    display: none;
}

HTML Markup

<asp:TextBox ID="txtTest" runat="server" 
        Columns="23" 
        CssClass="white-scroll hide-element"
        Rows="3"
        TextMode="MultiLine"/>

JavaScript

var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);

This way you will definitely get an alert.
You alert is empty because you have not set the property Text for your asp:Textbox

Make it Visible="true" to your textbox and than test.

<asp:TextBox ID="txtTest" runat="server" TextMode="MultiLine"
                    Rows="3" Columns="23" CssClass="white-scroll" />

if "txtTest" textbox has visible="false" in that case its not render on html code on client machine and if it hasn't on client's html code then how javascript calls this textbox. Because when javascript search this textbox by its id it doesn't find and it gives an error.

you can assign any other custom attribute to the control i.e.

    <asp:TextBox ID="txtTest" runat="server" Visible="false" TextMode="MultiLine"
                        Rows="3" Columns="23" CssClass="white-scroll"
 clientID="myClientID" />

and then access control using jquery like

var txtVal = $('textbox[clientID=myClientID]').val();

hope it helps.