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?

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

Answer 2

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.

Answer 3

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

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.

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.

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)

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