jQuery textarea .val（）意外返回未定义

Question

The following code has been working for a few weeks and has started occasionally returning 'undefined' when I use a selector in jquery to get the textarea's value, like so:

var text = escape($(this).find('textarea[id*=txtText]').val());

This control is appropriately defined below in the HTML by the following:

<asp:TextBox ID="txtText" runat="server" MaxLength="150" alt="150" TextMode="MultiLine"
     Rows="5" Columns="50" CssClass="customCss" ClientIDMode="Static" />

I had previously accessed the text by calling the following in my jquery:

var text = escape($("#txtText").val());

But this had started returning undefined as well, which is why I changed it to the prior example. I'm confused as to why some instances of this work, and others do not. Being a multiline textbox, could jquery be declaring it as undefined due to any

<br/>   

characters that are included in the textarea?

Any help or suggestions would be greatly appreciated.

Answer 1

The problem is that you're doing a runat="server" which makes the server change the ID. An example of this new ID could be something like MainContent_txtText , you can determine what the server is changing the ID to by right-clicking the textbox and clicking Inspect to inspect the element.

Chrome has Developer Tools built in which allows you to inspect. If you are not in Chrome, Firefox also has an Inspector, or you can download and use Firebug.

You could do a few things to circumvent this...

Solution 1

Determine the newly-generated ID using the Inspector method in the first paragraph and access it via that ID in similar fashion to your code sample:

var text = escape($("#insert_id_from_inspector_here").val());

Solution 2

Give the control a class, and get the value from that class element:

var text = escape($(".txtText").val());

Solution 3

You can also print out the ID dynamically into your javascript code:

var text = escape($("#<%= txtText.ClientID %>").val());

Answer 2

It could be cause on your asp:TextBox You have specified ClientIDMode of static.

<asp:TextBox ID="txtText" runat="server" MaxLength="150" alt="150" TextMode="MultiLine"
 Rows="5" Columns="50" CssClass="customCss" **ClientIDMode="Static"** />

If this control is contained in other controls you'd end up with something like:

ListView1_ProductIDLabel_txtText

MSDN Details on ClientIDMode

Static The ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains.

Use Chrome dev tools to look at the id from the DOM

Answer 3

One thing you can do is...

var text = escape($(this).find('textarea[id*=<%=txtText.ClientID%>]').val());

Performance difference is negligible, even so I just usually do a view source, find w/e asp.net is calling it and use that. The above approach is fool proof however as far as I know.