How do I Get ClientID using Javascript in .NET User Control?

For my web application I have an image control within a user control.  When the user clicks this image I want to change some of the properties, such as the width and height.  How do I get the correct rendered Clientid for this image?  I want to use it with getElementById().  FYI, There could be multiple instances of the user control on the main page.  

I was trying to use the user function GetClientId(strid) (see my code).  GetClientId() returns  "Button1" instead of "imgSignatureCapture".  "Button1" is a button on the main page, not on the user control.  

Any help is greatly appreciated!
<img id="imgSignatureCapture" src="pencil-icon.jpg" 
        style="width: 40px; height: 40px" onclick="test();" />
function GetClientId(strid)
     var count=document.forms [ 0 ] . length ;
     var i = 0 ;
     var eleName;
     for (i = 0 ;  i < count ;  i++ )
       eleName = document.forms [ 0 ] . elements [ i ] .id;
       pos=eleName.indexOf ( strid ) ;
       if(pos >= 0)  break;           
    return eleName;
function test()
    alert("GetClientId('imgSignatureCapture') = " + GetClientId('imgSignatureCapture'));  
    document.getElementById(GetClientId('imgSignatureCapture')).style.height = "75px" 
    document.getElementById(GetClientId('imgSignatureCapture')).style.width = "75px"

Open in new window

Who is Participating?
funwithdotnetConnect With a Mentor Commented:
Your function only loops through the main layer of for elements, not elements contained within. It will return the last element in the form if no match is found.

I would probably do something like this:
<img id="imgSignatureCapture" src="pencil-icon.jpg" 
        style="width: 40px; height: 40px" onclick="test(this);" />
function test(obj)
    alert("obj id= " +; = "75px" = "75px"

Open in new window

I think you don't need to look for the clientid of the image. Because the image is html control(you don't have runat="server") you should be able to do document.getelementbyid in your usercontrol and get the image control in javascript.

 If it is a server side control you can use some thing like.
try using document.getElementById("<%=imgSignatureCapture.ClientID %>") in your usercontrol.

Or  aslo you can do is do the page 'View Source' and get the html id of the control and use it in javascript. (This is a bad way but it works)

thespicemanAuthor Commented:
document.getElementById("<%=imgSignatureCapture.ClientID %>").style.height = "75px"  
causes an object not found error.
thespicemanAuthor Commented:

Your solution does allow me to access the image file...great!  But I'm not sure if this is the total solution I need.  Here's why...

I simplified my problem with just an image control.  What I really need is to change properties on both the image and an ActiveX control.  Here's the HTML for the ActiveX:
<OBJECT classid="clsid:69A40DA3-4D42-11D0-86B0-0000C025864A"  
            id="SigPlus" name="SigPlus" CODEBASE=""   
            style="HEIGHT: 1px; LEFT: 0px; TOP: 0px; WIDTH: 1px; visibility:hidden; vertical-align:middle" 
            <PARAM NAME="_Version" VALUE="131095">
            <PARAM NAME="_ExtentX" VALUE="4842">
            <PARAM NAME="_ExtentY" VALUE="1323">
            <PARAM NAME="_StockProps" VALUE="0">

Open in new window

use this to find client id

<script type="text/javascript">
  var txtUsernameID = '<%= txtUsername.ClientID %>';
  var txtPasswordID = '<%= txtPassword.ClientID %>';
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.