6

The following code does not work. The markup is in a User Control and I suppose that's why ClientID returns the wrong prefix for the TextBox id.

Markup:

<INPUT id="txtName" runat="server" maxlength="50" style="WIDTH:100px">
<INPUT type="button" value="Find Your Doctor" id="btnFind" runat="server"
      style="MARGIN-LEFT:10px;WIDTH:130px">

Code-Behind:

btnFind.Attributes.Add("onClick",string.Format("DoctorLink
        ('{0}',document.getElementById('{1}').value,{2});",
        row["ZipCode"],
        txtName.ClientID));

Results in browser:

<input name="DoctorsMainArea1$ctl01$txtName" type="text"
   id="DoctorsMainArea1_ctl01_txtName" maxlength="50" style="WIDTH:100px" />

<input name="DoctorsMainArea1$ctl01$btnFind" type="button" 
   id="DoctorsMainArea1_ctl01_btnFind" value="Find Your Doctor" style="MARGIN-
   LEFT:10px;WIDTH:130px" onClick="PrepareDoctorLink('90210',
   document.getElementById('DoctorsMainArea1_ctl00_txtName').value);" />

As you can see, the parameter for the JavaScript call is DoctorsMainArea1_ctl00_txtName, but the actual id of the input element is DoctorsMainArea1_ctl01_txtName.

Any idea how to fix this? jQuery? I am not so much interested in an explanation of what's going on (maybe there is another control on this page that is interfering), but a more robust way to solve the problem.

abatishchev
  • 98,240
  • 88
  • 296
  • 433
cdonner
  • 37,019
  • 22
  • 105
  • 153
  • 1
    why do you need to use document.getElementById when its the onclick event for the same control you're trying to retrieve? Can you not just use "this" (which will return the input box. Then you wont even need to try and work out the id, and you wont need runat="server". – RPM1984 Aug 25 '10 at 01:33
  • The onclick handler for the button is put together server-side because I need the zip code and other parameters that I removed to make the code easier to read. – cdonner Aug 25 '10 at 01:41
  • Are you changing the control tree _after_ reading ClientID? – sisve Aug 25 '10 at 04:43
  • Possibly. The ClientId is read in the Page_Init() event. There is so much going on in this app that I cannot answer the question with certainty. – cdonner Aug 27 '10 at 18:30

4 Answers4

5

I don't know which asp.net version you are using but in 4.0 you can declare inside any server control ClientIDMode="static" and it will give you the exact id in browser.

Example:

<asp:Textbox id="txtName" runat="server" ClientIdMode="static"/>

Others are predictable, inherit and it can be used with ClientIdRowsuffix.Can be used at page level and even on master pages and even in web.config file.

Example on web.config file:

<system.web>
<Pages clientIDMode="predictable"/>
other system web properties
</system.web>

Watched Craig shoemaker's Video at tekpub, you can also read more about it at Rick's bloglink text. It's pretty cool tho.

Developer
  • 2,987
  • 10
  • 40
  • 51
4

You should try moving the code that adds the onclick attribute to the button in the PreRender event (or OnPreRender override) in your page or user-control. That should probably get the ClientID right.

VinayC
  • 47,395
  • 5
  • 59
  • 72
0

A fast solution:

btnFind.Attributes.Add("onClick",string.Format("DoctorLink
        ('{0}',document.getElementById('{1}').value,{2});",
        row["ZipCode"],
        "DoctorsMainArea1_ctl01_" + txtName.ClientID));

This happens because you have a content placeholder in your page somewhere.

Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
0

another solution: html tag:

<input type="text" name="txtName" id="txtName" />

code-bind:

string txtName_value = Request.Forms["txtName"];

and you can get the value

just use the html control.

Tim Li
  • 215
  • 1
  • 2
  • 8
  • ps: don't give the repeat name in the page, it will become a string that like "value1,value2" – Tim Li Aug 25 '10 at 01:43
  • Like I said, this is a user control and your solution does not work for multiple instances of the control on one page. Since in this case there won't be more than one, and if nothing better comes up, I may still use your suggestion (until it breaks the page the next time). I still believe that this can be done more elegantly with jQuery. – cdonner Aug 25 '10 at 02:32