retrieve ID of server control using jQuery

Question

How do I get the ID of a server control with jQuery?

E.g. I have

<asp:Label ID="label1" runat="server""></asp:Label>

and now I want to get "label1",

var id = ??

Have a look at the HTML that generates. Not too sure on how ASP `runat` works — JohnP, Apr 14 '11 at 15:56
@JohnP is right, you can look at the HTML, or just use the clientID like I show below. — Jack Marchetti, Apr 14 '11 at 16:04

score 11 · Answer 1 · edited Jan 19 '12 at 17:15

11

If you use ASP.NET 4.0 you can set attribute ClientIDMode="Static" and your code will looks following way:

<asp:Label ID="label1" runat="server" ClientIDMode="Static"></asp:Label>

js:

var id = 'label1';

edited Jan 19 '12 at 17:15

answered Apr 14 '11 at 16:38

pstarkov

149
5

gotta love .net 4.0. the whole 'clientid" thing definitely caused some long hours of googling for me back in the day. – Jack Marchetti Apr 14 '11 at 17:18
1

Can add pages clientIdMode="Static" directive in web.config to have entire site do this. – Rake36 Jun 20 '13 at 13:04
Actually, shouldn't the js be `var id = document.getElementById("label1");` ? – Krondorian Feb 06 '14 at 23:20
No, it just id, not the element itself. – pstarkov Feb 07 '14 at 11:49

Jack Marchetti · Answer 2 · 2011-04-14T17:18:08.583

9

var labelID = $('#<%= label1.ClientID %>');

You need to get the client ID.

If you just need the ID, and not the actual value of the control, then you don't even need jQuery.

var labelID  = '<%= label1.ClientID %>';

edited Apr 14 '11 at 17:18

answered Apr 14 '11 at 16:01

Jack Marchetti

15,026
13
73
116

In your first example, I would rename 'id' to something else since it's a reference to the JQuery wrapper for the label element. – Eric Falsken Apr 14 '11 at 16:38

score 3 · Answer 3 · edited Aug 09 '12 at 18:37

3

var $lblObj = $("label[id$='label1']:first")

edited Aug 09 '12 at 18:37

j0k

21,914
28
75
84

answered Aug 09 '12 at 09:57

Roman

31
1

score 0 · Answer 4 · answered Apr 14 '11 at 15:57

0

jQuery runs on the client side so would only be able to access the ID of the html element rather than the asp control on the server.

answered Apr 14 '11 at 15:57

Ira Rainey

5,029
2
30
41

True, jQuery runs on the client side. However, ASP does some funky stuff to the IDs of controls with the runat tag. So you can't just use the ID. It changes at runtime... – Eric Burdo May 15 '13 at 11:59

score 0 · Answer 5 · answered Nov 23 '11 at 09:11

0

Are you using master page. If yes give ContentPlaceHolderID along with control id.

Eg:

 jQuery("#ContentPlaceHolderID_ControlId").val;
   jQuery("#body_label1").text;

You can see this in Viewsource

answered Nov 23 '11 at 09:11

selva

781
2
12
25

That approach gets ugly, the more "nesting" you have. ASP Panels, User Controls, Master Pages, etc all add to the ID value. You either need to use a pure jQuery approach, and get the control that "ends with" your ControlID value, or use the approach @pstarkov or Jack Marchetti mentioned. – Eric Burdo May 15 '13 at 11:56

score -1 · Answer 6 · answered Apr 14 '11 at 16:02

-1

Labels render as span tags. So if you want to select all the Labels:

    $(document).ready(function()
    {
        $Labels = $("span");

        $Labels.each(function()
        {
            alert(this.id); 
        });
    });

answered Apr 14 '11 at 16:02

Steve Wellens

20,160
2
24
64

retrieve ID of server control using jQuery

6 Answers6

Linked