CODEWITHSUNDEEP
c#javascriptasp.net
Shimaa
Shimaa

Reputation: 21

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

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

Upvotes: 1

Views: 23719

Answers (5)

mangesh
mangesh

Reputation: 31

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.

Upvotes: 3

Bilal Murtaza
Bilal Murtaza

Reputation: 795

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.

Upvotes: 0

Dave Long
Dave Long

Reputation: 794

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

Upvotes: 2

Gaurav Agrawal
Gaurav Agrawal

Reputation: 4431

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.

Upvotes: 0

Saurabh
Saurabh

Reputation: 5727

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

Upvotes: 0

Related Questions