get asp:textbox value in client side using javascript function doesn't work

Question

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

What do the alert display? or is there any javascript error? — Waqas Raja
– 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
– Waqas Raja, Commented Jul 2, 2011 at 5:40
it set to true in another control, this is a part of other code — Shimaa
– Shimaa, Commented Jul 2, 2011 at 9:29

Echilon · Accepted Answer · 2012-12-07 13:06:41Z

3

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.

edited Dec 7, 2012 at 13:06

Echilon

10.3k33 gold badges138 silver badges225 bronze badges

answered Dec 7, 2012 at 12:48

mangesh

311 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

codeandcloud · Accepted Answer · 2011-07-02 05:34:48Z

2

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

edited Jul 2, 2011 at 5:34

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

answered Jul 2, 2011 at 5:02

Dave Long

7844 silver badges7 bronze badges

11 Comments

Saurabh Over a year ago

how can you say it is "txtText ?

Shimaa Over a year ago

mm sorry I changed the nae here in the post and forgot to change the other, but that is not the problem

Dave Long Over a year ago

I clicked the edit link and saw the control name was different to the js script...he's now edited his code (I don;t have edit priviledges yet, otherwise would have edited his code to display the <asp:Textbox... that is now showing

codeandcloud Over a year ago

+1 dave. @sourabh, that -1 was not fair. You can clearly see that OP has edited the question.

codeandcloud Over a year ago

@Dave Long: updated with some sample code. hope you dont mind.

|

Saurabh · Accepted Answer · 2011-07-02 05:06:26Z

0

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" />

answered Jul 2, 2011 at 5:06

Saurabh

5,7272 gold badges28 silver badges32 bronze badges

2 Comments

Shimaa Over a year ago

this is a part of other code and sure it is visible while testing :)

Saurabh Over a year ago

but it is set to false in your question ??

Gaurav Agrawal · Accepted Answer · 2011-07-02 05:16:25Z

0

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.

answered Jul 2, 2011 at 5:16

Gaurav Agrawal

4,44110 gold badges47 silver badges64 bronze badges

Comments

Bilal Murtaza · Accepted Answer · 2011-07-02 06:22:18Z

0

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.

answered Jul 2, 2011 at 6:22

Bilal Murtaza

8955 silver badges9 bronze badges

3 Comments

Shimaa Over a year ago

when I used JQuery, I get the same result; when set text in server I get it, but if I set it on client side, no

Bilal Murtaza Over a year ago

then there might be some other issue, this technique is tested :)

Shimaa Over a year ago

this code is inside user control (.ascx file), is there may be a relation?

Collectives™ on Stack Overflow

get asp:textbox value in client side using javascript function doesn't work

5 Answers 5

Comments

11 Comments

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

11 Comments

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related