JQUERY: Finding by control ID

Question

Currently my aspx page contains

<input type="text" name="openid_username" />
<input type="text" name="openid_identifier" />

but now i would like to replace them with

<asp:TextBox ID="openid_username" runat="server"></asp:TextBox>
<asp:TextBox ID="openid_identifier" runat="server"></asp:TextBox>

so how should i modify the following JQUERY, to reflect the input boxes to textboxes replacement?

  var $usr = $this.find('input[name=openid_username]');
  var $id = $this.find('input[name=openid_identifier]');

Answer 1

I would use the "ends with" option on the attribute selector in case the name is mangled by the control being in a container. Note the $= instead of =.

var $usr = $this.find('input[name$=openid_username]');
var $id = $this.find('input[name$=openid_identifier]');

Answer 2

If you want the exact ID of your controls, you can do this:

var $usr = $this.find('#<%= openid_username.ClientID %>');
var $id = $this.find('#<%= openid_identifier.ClientID %>');

Of course, this is assuming your JS isn't in an external file.

Answer 3

 var $usr=$("#openid_username");

should work or try

 var $usr = $('[id*=openid_username]');