How can I use a JavaScript variable to get an ASP.NET ClientID inside a JavaScript function?

Question

I'd like to be able to get a ASP.NET control's ClientID inside of a JavaScript function. I also would like to be able to pass in a var containing a control name so that different controls can use the same function.

For example, if I wanted to use a control named Button1, this works fine:

function doStuffToButton1Control()
{
    var buttonControl = document.getElementById('<%= Button1.ClientID %>');
    //do stuff with buttonControl
}

But I get an error when I try to make the control name dynamic. I'm trying to string together the ClientID call, like so:

function doStuffToGenericControl(controlName)
{
    var dynamicControl = document.getElementById('<%= ' + controlName + '.ClientID %>');
    //do stuff with dynamicContorl
}

I've tried using double quotes or single quotes when creating the string, but the error is always "Too many characters in string literal" or "Too many characters in character literal". The control exists and the name passes correctly (as tested by an alert(name) ).

Is there a better way to go about this, or am I missing something obvious?

Thanks!

Update: This function will be on a master page. Any number of child pages will be calling it. For example, one child page might have an ASP control that calls it like so:

<asp:LinkButton ID="Button2" runat="server" OnClientClick="doStuffToGenericControl('Button2')">...</asp:LinkButton>

But another page might have this ASP control that also calls it:

    <asp:LinkButton ID="Button4" runat="server" OnClientClick="doStuffToGenericControl('Button4')">...</asp:LinkButton>

However, these controls' IDs often change by ASP.NET on render, so they end up looking, for example, like MainContent_Button2 instead of just Button2 . To get around this, I traditionally just used <%= Button1.ClientID %> , but since I want any number of controls to be able to use this one function, I'm having a bit of trouble.

Update 2: I was able to use this along with a getAttribute call to get what I needed. (Obviously this will only work when the control you are referring to is the one you are clicking, but that is what I needed) Like so:

function doStuffToGenericControl(controlName)
{
     var controlID = controlName.getAttribute('id');
     var control = document.getElementById(controlID);
     //do stuff with control
}

Answer 1

' <%= Button1.ClientID %>' is something that replaced in with control id on asp.net page render,

but when you pass variable in client side, you should pass id and use it without any % scops

so try this

function getGenericControl(control)
{
    var dynamicControl = control;
    alert(dynamicControl);
    //do stuff with dynamicContorl
}

UPDATE

You can use <%= ClientID %> to generate parameters for the method above, so just change OnClientClicks like this and use method above

<asp:LinkButton ID="Button2" runat="server" OnClientClick="doStuffToGenericControl(this)">...</asp:LinkButton>

Answer 2

Rather than passing control name why don't you pass the control itself by passing this in the function like this:

  <asp:LinkButton ID="Button2" runat="server" OnClientClick="doStuffToGenericControl(this)">...</asp:LinkButton>

and your function will be :

function getGenericControl(control)
{
    var dynamicControl = control;
    alert(dynamicControl.id);
    //do stuff whatever you want with dynamicContorl
}

Answer 3

I would strongly suggest using a class if that is possible,

var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
                > -1) {
            elems[i].innerHTML = content;
        }
    }