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?

Solution 1

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

Solution 2

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