control id rendered correctly but still getting javascript error

Question

Error :

Microsoft JScript runtime error: 'ctl00_ContentPlaceHolder1_txtAdmDate' is undefined

Code :

<input ID="txtAdmDate" runat="server" readonly="readonly" type="text" 
                                        tabindex="23" clientidmode="AutoID" />
    <a href="#" onclick="showCalendarControl(ctl00_ContentPlaceHolder1_txtAdmDate)">
                                    <img border="0" src="images/SmallCalendar.jpg" 
                                        style="width: 20px; height: 20px" /></a>                             

Javascript:

function showCalendarControl(textField) {
      calendarControl.show(textField);
    }

html rendered Source :

<input name="ctl00$ContentPlaceHolder1$txtAdmDate" type="text" id="ctl00_ContentPlaceHolder1_txtAdmDate" readonly="readonly" tabindex="23" />
       <a href="#" onclick="showCalendarControl(ctl00_ContentPlaceHolder1_txtAdmDate)">
        <img border="0" src="images/SmallCalendar.jpg" 
                                        style="width: 20px; height: 20px" /></a>

Problem :

Though the html rendered source shows that the id of control is ctl00_ContentPlaceHolder1_txtAdmDate and the same is passed to the javascript function error is generated.I have tried setting clientidmode to Autoid and static but nothing works. Need help from you guys to solve this issue.

Answer 1

First, it looks like you are inside a Master Page or User Control (hence the name mangling), and in that case you should not assume how the name will be mangled by hardcoding it. If you use a different master page or move the User Control to another page, this the mangled name could be different. To resolve that, use the ClientID property instead.

Also, you can't just reference the control directly by name to have Javascript find it, because the controls are not global variables. Instead, you can use document.getElementById to look get a handle to the control.

<a href="#" onclick="showCalendarControl(document.getElementById('<%=txtAdmDate.ClientID%>')">

Answer 2

When you say this:

showCalendarControl(ctl00_ContentPlaceHolder1_txtAdmDate)

You're assuming that ctl00_ContentPlaceHolder1_txtAdmDate is a variable but it isn't a variable, it is just a DOM id attribute. You could say this:

showCalendarControl(document.getElementById('ctl00_ContentPlaceHolder1_txtAdmDate'))

to turn it into an object inside the function call or you could send an ID to showCalendarControl and let it turn the ID into an object:

onclick="showCalendarControl('ctl00_ContentPlaceHolder1_txtAdmDate')"

and then adjust showCalendarControl:

function showCalendarControl(textFieldId) {
    var textField = document.getElementById(textFieldId);
    calendarControl.show(textField);
}