Getting ID from asp.net runat server in jQuery

Question

I'm trying make some stuff in jQuery using ASP.NET. But the ID from runat="server" is not the same as the id used in HTML.

I used to use this to get the ID from this situation:

$("#<%=txtTest.ClientID%>").val();

But in this case, it does not work. I'm clueless as to why.

Javascript

/* Modal */
function contatoModal() {
    //alert("Test");
    alert($("#<%=txtTest.ClientID%>").val());
}

HTML

< input runat="server" id="txtTest" value="test" />

Any tips?

What does it actually output for the ID of the textbox and the <%=txtTest.ClientID %> ? — Richard Dalton, Mar 22 '11 at 14:41

score 22 · Accepted Answer · answered Mar 22 '11 at 14:41

22

<%= txtTest.ClientID %> should work but not in a separate javascript file where server side scripts do not execute. Another possibility is to use a class selector:

<input runat="server" id="txtTest" value="test" class="txtTest" />

and then:

var value = $('.txtTest').val();

answered Mar 22 '11 at 14:41

Darin Dimitrov

1,023,142
271
3,287
2,928

Wow! that works... i put my function inside my ascx page, and it works now. The class part i knew (but thanks for the tip too), and it works in a separate javascript (as class). There is **no way** to runat server id works in my function.js page ? **script_path:** script/function.js **ascx_path:** components/contact.ascx Regards – Michel Ayres Mar 22 '11 at 15:00
There is no way to put the asp.net id code into a JS file, asp.net will not look inside there to put its value. – RealityDysfunction Oct 01 '13 at 22:18

score 6 · Answer 2 · edited Aug 20 '16 at 08:33

6

In WebForm / HTML Page....

<asp:TextBox ID="txtUserName" runat="server" Class="form-control"></asp:TextBox>

In Jquery

var UserName = $("[id*=txtUserName]").val();
alert(UserName);

100% Sure its Working for me....

edited Aug 20 '16 at 08:33

H. Pauwelyn

13,575
26
81
144

answered Aug 20 '16 at 07:09

Ahsan Aftab

181
2
6

This Method is for... Asp.net Control... – Ahsan Aftab Aug 20 '16 at 07:10
this answer will work- If you want to select elements which id **contains** a given string.. – Eran Meir Jul 04 '17 at 20:03

score 5 · Answer 3 · answered Aug 25 '14 at 17:12

As others have mentioned, you can pass a class selector to jQuery, but that is a bit messy. I prefer to use the jQuery attribute ends with selector. Given that a generated ID is a flattened hierarchy of controls, you can use the "ends with" selector to find your element.

<input runat="server" id="txtText" />

When rendered, the generated ID becomes something like this (if within a masterpage's content place holder):

<input id="ctl00_contentplaceholder_txtText" />

To find this control:

$("input[id$='txtText']")

Take caution when using this within a repeater.

score 2 · Answer 4 · edited May 23 '17 at 11:53

As Darin Dimitrov said in his answer:

<%= txtTest.ClientID %> should work but not in a separate javascript file where server side scripts do not execute.

The solutions that I could find for those are:

<input runat="server" id="txtTest" value="test" class="txtTest" />

Use class instead of ID

Using class you can retrieve the value anywhere. This is one of the best solutions (usually the best)

var value = $('.txtTest').val();

Use ClientID code in the aspx

You can always call ClientID in the aspx, but if you are working with some kind of structure, this isn't the best solution. I like to use this method when I'm testing something.

var value = $('#<%=txtTest.ClientID%>').val();

You can also use ClientID in a external js file with a workaround. IT'S NOT PRETTY, use only if you really need it. I usually do this when I use Telerik.

In the aspx:

var id = <%=txtTest.ClientID%>;

In the js file:

var value = $('#'+id).val();

Use Control.ClientIDMode Property Static

so the HTML becomes

<input runat="server" id="txtTest" value="test" ClientIDMode="Static" />

and the js can call it as it is named of

var value = $('#txtTest').val();

The problem with this solution is that you need to be very careful to avoid duplicity on the ids of your page. Try never use Static mode in a controller.

As states MSDN:

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.

The link of shaans's answer is a awesome place to check extra information about ClientIDMode.

Cleaner HTML Markup with ASP.NET 4 Web Forms - Client IDs (VS 2010 and .NET 4.0 Series)

score 2 · Answer 5 · answered Mar 22 '11 at 14:44

2

Try putting it into a variable name:

var txtTestID = '#' + '<%=txtTest.ClientID %>';

$(txtTestID).val();

I'm not sure if the <%= likes being inside double quotes. I've always had mixed behaviors when not using the single quote.

answered Mar 22 '11 at 14:44

Joel Etherton

37,325
10
89
104

This does not work too. Same thing as my sample, but thanks for the tip anyway =D PS: i used the single quotes this time. =X – Michel Ayres Mar 22 '11 at 14:52

shaans · Answer 6 · 2011-03-22T20:53:46.833

2

When using ASP.NET 4 and the ClientIDMode is set to “Predictable”, you can predict the ID based on hierarchy. Or set it set to “Static”, so asp.net wont mess it up.

ScottGu's article on it http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx

And this is extremely useful when using external JS file scenarios.

edited Mar 22 '11 at 20:53

answered Mar 22 '11 at 17:58

shaans

534
2
5

score 1 · Answer 7 · answered Mar 22 '11 at 14:41

1

To avoid issues with rendered ID's, use a class instead. This won't change during rendering:

function contatoModal() {

//alert("Test");

alert($(".txtTest").val());

}

HTML:

< input runat="server" id="txtTest" value="test" class="txtText" />

answered Mar 22 '11 at 14:41

Curtis

101,612
66
270
352

Also looks a lot neater might I add – Curtis Mar 22 '11 at 14:42
It might not work as expected: class in jquery was `txtTest`, in HTML differs: `txtText` - typo? – hc_dev Aug 04 '21 at 17:35

score -1 · Answer 8 · answered Aug 04 '21 at 07:30

-1

Adding a css class to the input and then using this class in jQuery to getting the input element will solve the issue.

answered Aug 04 '21 at 07:30

ferry7ft

1
2

From questions we expect code attempts. Same we can use code in our answers to illustrate. – hc_dev Aug 04 '21 at 17:32

Getting ID from asp.net runat server in jQuery

8 Answers8

Linked

Related