How to dynamically find ClientIDs of controls using javascript?

Question

I'm working on a javascript function which takes in the names of three controls, then find them on the page. There are five sets of these controls. For simplicity, I would like to use the same function and pass in the set of control names, then have the function dynamically find the controls by clientID. Is there a way to do this?

Here's what I have so far...

        function InsertKeyword(keywordCtrl, subjCtrl, bodyCtrl) {
            var ctrl;
            if (OnSubj) ctrl = $find("<%=" + subjCtrl + ".ClientID%>");
            if (OnBody) ctrl = $find("<%=" + bodyCtrl + ".ClientID%>");
            if (OnSubj == 1 || OnBody == 1) {
                var selectedIndex = document.getElementById(keywordCtrl).selectedIndex;
                var selectedText = document.getElementById(keywordCtrl).options[selectedIndex].text;
                var strSpan = '<u>' + selectedText + '</u>&nbsp';
                ctrl.pasteHtml(strSpan);
            }
        }

This doesn't work, but it illustrates what I'm trying to do.

How do you dynamically find the ClientIDs of controls using javascript?

I think you're mixing up how client-side and server-side work... <%= %> is a server side command — freefaller
– freefaller, Commented Jul 12, 2012 at 13:50

freefaller · Accepted Answer · 2012-07-12 14:15:59Z

3

<%= %> is server-side, not client-side code, so instead of...

if (OnSubj) ctrl = $find("<%=" + subjCtrl + ".ClientID%>");
if (OnBody) ctrl = $find("<%=" + bodyCtrl + ".ClientID%>");

You should have something like...

if (OnSubj) ctrl = $find("<%=subjCtrl.ClientID%>");
if (OnBody) ctrl = $find("<%=bodyCtrl.ClientID%>");

Where subjCtrl and bodyCtrl are actual server-side control objects.

The only way you could get your JavaScript to work was if you CALLED the function something like this...

InsertKeyword("my keyword", "<%=subjCtrl.ClientID%>", "<%=bodyCtrl.ClientID%>");

And then had your JavaScript something like...

function InsertKeyword(keywordCtrl, subjCtrl, bodyCtrl) {
  var ctrl;
  if (OnSubj) ctrl = $find(subjCtrl);
  if (OnBody) ctrl = $find(bodyCtrl);

UPDATE

Based on the comment by the OP, it is not possible to use the <%= %> syntax when declaring OnClientClick attribute on a server-side control via the mark-up.

The following will not work, and the <%=myCtrl.ClientID%> will be rendered as exactly that when sent to the browser...

<asp:Button runat="server" ID="test" OnClientClick="myFnc('<%=myCtrl.ClientID%>')"/>

Instead you need to set the attribute via the code-behind (C# assumed) via one of these methods...

test.OnClientClick = "myFnc('" + myCtrl.ClientID + "');";
test.OnClientClick = string.Format("myFnc('{0}');", myCtrl.ClientID);

edited Jul 12, 2012 at 14:15

answered Jul 12, 2012 at 13:55

freefaller

20.1k7 gold badges62 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ks78 Over a year ago

I like your answer, but I tried it out and only the string "<%=txtSubject.ClientID%>" is passed in, not the control's client id.

freefaller Over a year ago

@ks78, are you sure that <%=txtSubject.ClientID%> is being processed on the server by ASP.NET? If it's contained with a .js file (for instance) then the file will be simply pumped out to the browser without any processing

freefaller Over a year ago

@ks78, remember that only the page / usercontrol containing the server-side control object can provide the ClientID (unless of course you have setup a method/property/session variable/etc to retrieve that value)

ks78 Over a year ago

The script is on the .aspx page, not in a .js file. The function is being called from the OnClientClick property of a dropdownlist. For some reason the server isn't processing it and replacing it with the control's clientID.

freefaller Over a year ago

@ks78, is <%=txtSubject.ClientID%> part of the actual OnClientClick attribute? If so, then it's not possible to have that syntax within the mark-up of the control. I will update my answer now to explain what I mean

|

Waqar Janjua · Accepted Answer · 2012-07-12 14:04:47Z

1

If I understand you question then I think you want the control's ID in javascript. If you are using Asp.Net 4, then set the controls ClinetIDMode = Static. Now in javascript enter the same control id. FOr example if you have a control with ID myControl then in javascript you can get it as

var cID = document.getElementByID('myControl');

answered Jul 12, 2012 at 14:04

Waqar Janjua

6,1432 gold badges28 silver badges36 bronze badges

Comments

Amiram Korach · Accepted Answer · 2012-07-12 13:50:31Z

0

You can't do that:

"<%=" + subjCtrl + ".ClientID%>"

You need:

"<%= codeBehindControlID.ClientID %>"

answered Jul 12, 2012 at 13:50

Amiram Korach

13.3k3 gold badges32 silver badges32 bronze badges

Comments

webnoob · Accepted Answer · 2012-07-12 13:54:53Z

0

How about using CSS selectors to get control matching on the last part of the ASP.NET clientID, like so:

$.find('input[name$='+subjCtrl+']:checked');

Not tested but it should be something like that.

EDIT:I don't know what controls you are using but this is an example. Can provide a more detailed one if you post your ASP.NET markup as well.

answered Jul 12, 2012 at 13:54

webnoob

16k13 gold badges87 silver badges169 bronze badges

1 Comment

ks78 Over a year ago

I don't know much about CSS selectors, but wouldn't that be referring to client-side control names?

Collectives™ on Stack Overflow

How to dynamically find ClientIDs of controls using javascript?

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related