unable to access asp.net textbox value in jquery modal dialog

Question

In my code a modal popup occurs on change event of a drop down list. The popup contains an asp textbox and button. I am unable to use the textbox value in my code behind. My current code gives value undefined for that textbox. Here is the code snapshot:

I have used avgrund plugin for modal popup.

<script type="text/javascript">
$(function () {
    $('#Content_ddl_RepCountry').change(function () { // popup called on dropdown change enevt
        var result = $(this).val();

        if (result == "test") {
            $(this).avgrund({ 
                showClose: true,
                showCloseText: 'CLOSE',
                template: $("#modal_div").html(),
                open: function () {
                    var dlg = $('#modal_div').dialog({
                    });
                    dlg.parent().appendTo(jQuery("form:first"));
                }

            });

            }
        else {
            alert('how r');
            this.clearAttributes();            
        }        

    });
});
</script>

Call to ajax function to pass textbox value to the code behind

<script type="text/javascript">
     function new_Fn() {
                $.ajax({
                    type: "POST",
                    url: "Defacement.aspx.cs/childBind",
                    data: {
                        txt1: $("#test_input").val()
                    },
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: alert('successful' + $('#Content_test_input').value)

                });
            }
</script>

Div containing the modal popup on the aspx page

<div id="modal_div" style="display: none;"> <%--style="display: none;" --%>
    <table id="tbl_heading" width="100%" height="100%"> 
         <tr>
            <td colspan="2"><span id="heading" class="heading">Add New Country</span></td> 
         </tr> 
         <tr> 
            <td colspan="2"></td> 
         </tr> 
        <tr> 
            <td colspan="2">
                <asp:Label ID="test_label" runat="server" Text="Label"></asp:Label>
            </td> 
         </tr> 
         <tr> 
            <td class="P_td_label"><span id="test_span">Input1</span></td> 
            <td>
                <asp:TextBox ID="test_input" runat="server"></asp:TextBox>
            </td> 
         </tr> 
         <tr> 
            <td colspan="2">

                <asp:Button ID="btn_test" runat="server" Text="Save" CssClass="button" OnClientClick="new_Fn(); return false;" OnClick="btn_test_Click" UseSubmitBehavior="false" />

            </td> 
         </tr> 
     </table>
</div>

C# code containing webmethod being called in the ajax function

[WebMethod]
        public static string childBind(string txt1)
        {
            string res = txt1.ToString();
            return res;
        }

Any help is appreciated.

Answer 1

The textbox inside the popup is a server side control. so try using:

$('<%=test_input.ClientID %>').val()

Answer 2

Change to this.

EDIT: Note the quotes around txt1 in data parameter.

    $.ajax({
                type: "POST",
                url: "Defacement.aspx.cs/childBind",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: {"txt1:" + $("#test_input").val()},

                success: function(){alert("successful" + $('#Content_test_input').val()); }

            });

Answer 3

You need pass value to page.aspx not to .cs file it is never accessible.

            $.ajax({
                type: "POST",
                url: "Defacement.aspx/childBind",
                data: {
                    txt1: $("#test_input").val()
                },