Find control within ContentTemplate using jquery asp.net

Question

I am using jquery to find a textbox control which is inside a ContentTemplate. I keep getting the error:

The name 'txtUserName' does not exist in the current context

This is my javascript:

            function ShowAvailability() {
            var myvar = $('#<%=txtUserName.ClientID %>').text();
            $.ajax({
                type: "POST",
                url: "Register.aspx/CheckUserName",
                data: '{userName: "' + $(myvar)[0].value + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response);
                }
            });

And this is my markup:

    <asp:CreateUserWizard ID="RegisterUser" runat="server" EnableViewState="False" OnCreatedUser="RegisterUser_CreatedUser">
    <WizardSteps>
        <asp:CreateUserWizardStep ID="RegisterUserWizardStep" runat="server">
            <ContentTemplate>
                <div class="accountInfo">
                  <fieldset class="register">
                    <div>
                        UserName :
                        <asp:TextBox ID="txtUserName" runat="server" onkeyup="ShowAvailability()"></asp:TextBox>
                        <input id="btnCheck" type="button" value="Show Availability" onclick="ShowAvailability()" />
                        <br />
                        <span id="mesg"></span>
                    </div>

Please help. I can't seem to find the solution anywhere. Thanks!

Answer 1

Instead of trying to select it, let it come to you as a parameter:

function ShowAvailability(domObject) {
            var myvar = domObject.val(); //switched from text() to val()
            $.ajax({
                type: "POST",
                url: "Register.aspx/CheckUserName",
                data: '{userName: "' + $(myvar)[0].value + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response);
                }
            });

Then in the markup use the jquery $(this) to have the text box send a reference of itself to the function:

<asp:TextBox ID="txtUserName" runat="server" onkeyup="ShowAvailability($(this))"></asp:TextBox>