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?

Ceil

What does it actually output for the ID of the textbox and the <%=txtTest.ClientID %> ? – Anjanette

Answer 1

<%= 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();

Diploid

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 – Ceil

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. – Pas

Answer 2

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....

Appointed

This Method is for... Asp.net Control... <asp:TextBox ID="txtUserName" runat="server" ></asp:TextBox> – Appointed

this answer will work- If you want to select elements which id contains a given string.. – Gelignite

Answer 3

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.

Hierarch

Answer 4

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.

Calf

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 – Ceil

Answer 5

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.

Warp

Answer 6

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)

Ceil

Answer 7

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

Fayola

Also looks a lot neater might I add – Fayola

It might not work as expected: class in jquery was txtTest, in HTML differs: txtText - typo? – Chophouse

Answer 8

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

Shopper

From questions we expect code attempts. Same we can use code in our answers to illustrate. – Chophouse