Question

I have this:

<input type="password" id="txtPassword" name="txtPassword" />

and I want to do something like this:

var password = document.getElementById("<%= txtPassword.ClientID %>").value();

but it tells me “‘txtPassword’ is not declared.” I’ve tried this:

var pswd = $find('txtPassword').value();

but I get “‘null’ is null or not an object. So Then I tried this:

var pswd = $find('txtPassword').value();

but I got the same thing. My input control is located in this mess:

    <asp:Panel ID="pnlPassword" style="display: none" runat="server">
<div class="PasswordPopup">
            <div id="PopupHeader">&nbsp;</div>
            <div class="Controls">
                <center><table><tr>
                    <td>Please enter your password:</td><td><input type="password" id="txtPassword" name="txtPassword" /></td></tr>
                <tr><td>&nbsp;</td>
                    <td><asp:button name="btnOK" id="btnOK" runat="server" text="OK" />&nbsp;&nbsp;<asp:button id="btnCancel" runat="server" text="Cancel" /></td></tr></table></center>
            </div>
 </div>
</asp:Panel>

How can I reference that input control in my javascript function?

Thanks,

Jason

Answer 1

Server side controls (i.e. runat=’server’) will have generated ids when the control is rendered in the HTML, while NON server side controls will be as is.

With Quintin’s solution, you should be able to use Control.ClientID to get access to your control.

The reason you were having trouble is syntax.

Solution1 (Quintin’s):

• Add runat=’server’ to your control
• var password = document.getElementById(“<%= txtPassword.ClientID %>”).value;

Solution2 (use jQuery):

• jQuery does not need the find notation for named elements
• var password = $(‘txtPassword’).value;

Solution3 (use DOM):
– var password = document.getElementById(‘txtPassword’).value;