How do I pass a server control's actual client Id to a javascript function?

Question

I have the following textbox server control in my web page:

Answer 1

you can add the onchange event from the code behind in the page_load method.

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack) return;
    txtZip.Attributes.Add("onclick", "ZipCode_OnChange(" + txtZip.ClientID + ")");
}

If you want to pass more than one control along with their ClientID , then this approach is good choice.

I hope this will solve the problem.

Answer 2

Put the <%= txtZip.ClientId %> between single quotes, to be like this:

'<%= txtZip.ClientId %>'


<asp:TextBox ID="txtZip" runat="server" onchange="ZipCode_OnChange(this, '<%= txtZip.ClientId %>', txtCity, txtState);" />

Update

Please check this article: http://www.jagregory.com/writings/how-to-use-clientids-in-javascript-without-the-ugliness/

Also I like this answer

Answer 3

There are a lot of ways to fix this, but I find the simplest thing to do in the general case is use the ScriptManager to include a separate script at the top of my pages specifically for the purpose of adding ClientIDs:

void AddClientIDs()
{
    var clientIDs = new StringBuilder();
    var declaration = "var {0}={1};";

    clientIDs.AppendFormat(declaration, "txtZip", txtZip.ClientID);        


    ClientScript.RegisterClientScriptBlock(this.GetType(), "ClientIDs", clientIDs.ToString(), true); 
}

Call that in the PreRender event (somewhere after databinding). Then, if you want to get a little fancy you can easily adapt the method up to accept an IEnumerable or params array of controls, and let it use the control names for the javascript variable names. Sometimes I do that, but it's usually simple enough to just add what I need directly to the method.

Even this is somewhat awkward, because controls including in other naming containers (like grids) can still cause problems. I'd like to see the ASP.Net team build something like this directly into the framework soon, but I'm not really expecting it :(

Answer 4

Came across the same problem, couldn't fix by any method given above. So I added an intermediate JS added a call to the actual JS function based on value passed. I know its one lame method to solve it, but it still worked for me.

Before:

<asp:ListBox ID="List1" runat="server" ondblclick="AddToList2( this,'<%= List2.ClientID %>' );" SelectionMode="Multiple" />

After

<asp:ListBox ID="List1" runat="server" ondblclick="ProcessList('Add');" SelectionMode="Multiple" />

<script>
function ProcessList(xStr){
 if(xStr == "Add")
  AddToList2( '<%= List1.ClientID %>', '<%= List2.ClientID %>' );
 else
  DeleteFromList2( '<%= List2.ClientID %>' );}
</script>

Answer 5

I solved the same problem with an <asp:CheckBox...

When using <%= TargetControl.ClientID %> (without single quotes surrounding), ASP.NET renders '<%= TargetControl.ClientID %>' and the associated javascript function isn´t called.

When using '<%= TargetControl.ClientID %>' (with sigle quotes surrounding), ASP.NET don´t evaluates the expression and renders exactly the same inside the single quotes.

So I decide to try with an Input(Checkbox) HTLM control instead, using the following markup

<input id="CheckBox1" type="checkbox" onclick="myFunction(someValue, '<%= TargetControl.ClientID %>')" />

and it worked!!!

Hope it helps.

Answer 6

<asp:TextBox ID="txtZip" runat="server" onchange="ZipCode_OnChange(this, txtCity, txtState);">


function ZipCode_OnChange(element, txtCity, txtState) {
    var ClientId = element.getAttribute('id'),
        ret = null,
        value = element.value;

    ret = WebService.GetCityAndState(value, OnComplete1, OnError, ClientId);
}