Why textbox's value becomes null on post back?

Question

I have a div to which i am showing in jquery modal pop up. I have a textbox inside it and a button. on click of that button i am sending the request on code behind side. now when i tries to get the textbox's value it comes "", every time. Below is my html.

<div id="divDelete" runat="server" style="display: none;">
        <div>
            <div>
                <h2>
                    Are you sure you want to delete your wishisdone account?</h2>
                <p>
                    Is there anything that can make you reconsider? Contact our support, if you have
                    any problems and we will help you.</p>
                <p>
                    If you wish to continue, and delete your account, be aware that we will only keep
                    your files for 30 days and then they will be permanently deleted. You can reactivate
                    your account at any time within 30 days by logging back in.
                </p>
                <p>
                    Please, let us know the reason for your decision, so we can make our services more
                    convenient to use.</p>
                <br />
                <label class="blackLabel">
                    Password&nbsp;<span class="mandatory">*</span></label>
                <p>
                    <asp:TextBox ID="txtPassword" CssClass="greyInputLarge" runat="server"></asp:TextBox>
                    <br clear="all" />
                    <span class="error" id="spPassword" runat="server"></span>
                </p>
                <label class="blackLabel">
                    Why are you leaving?&nbsp;</label>
                <p>
                    <asp:DropDownList ID="drpReasonOfDelete" CssClass="greySelectLarge" runat="server">
                        <asp:ListItem Text="I have another WishIsDone account" Value="1"></asp:ListItem>
                        <asp:ListItem Text="I haven't registered this account" Value="2"></asp:ListItem>
                        <asp:ListItem Text="No need in service anymore" Value="3"></asp:ListItem>
                        <asp:ListItem Text="Technical problems" Value="4"></asp:ListItem>
                        <asp:ListItem Text="WishIsDone is too slow for me" Value="5"></asp:ListItem>
                        <asp:ListItem Text="Some features do not work" Value="6"></asp:ListItem>
                        <asp:ListItem Text="I don't understand how to use WishIsDone" Value="7"></asp:ListItem>
                        <asp:ListItem Text="Other" Value="8"></asp:ListItem>
                    </asp:DropDownList>
                </p>
                <label class="blackLabel">
                    Please, explain further&nbsp;</label>
                <p>
                    <asp:TextBox ID="txtReason" CssClass="greyInputLargeForMultiline" runat="server"
                        TextMode="MultiLine"></asp:TextBox>
                </p>
                <asp:HiddenField ID="hdfPassword" runat="server" />
                <br clear="all" />
            </div>
        </div>
    </div>

and my jquery file is

$(document).ready(function () {
var $Error1 = $('[id$=divDelete]').dialog({
    autoOpen: false,
    resizable: false,
    modal: true,
    height: 'auto',
    width: 580,
    title: "Deactivate Account",
    buttons: {
        "Close": function () {
            $Error1.dialog('close');
        },
        "Delete my account": function () {
            if ($('[id$=txtPassword]').val() == '') {
                $('[id$=txtPassword]').css('border', '1px solid red');
                $('[id$=spPassword]').text("You can't leave this empty.");
                return false;
            } else {
                var password = $('[id$=txtPassword]').val();

                $('[id$=hdfPassword]').val(password);
                alert($('[id$=hdfPassword]').val());
                $('[id$=Button1]').click();
            }
        }
    },
    close: function (event, ui) {
    },
    open: function () {
    }
});

$('[id$=btnOpenPopUp]').live('click', function (e) {
    e.preventDefault();
    openPopUp();
});

function openPopUp() {
    $Error1.dialog('open');
}

var querystring = GetQueryStringParams('delete');
if (querystring == '1') {
    openPopUp();
}
});
function GetQueryStringParams(sParam) {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
    var sParameterName = sURLVariables[i].split('=');
    if (sParameterName[0] == sParam) {
        return sParameterName[1];
    }
}

}

Code behind code is

protected void Button1_Click(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(Request.QueryString["delete"]) && !string.IsNullOrEmpty(Request.QueryString["u"]))
    {
        try
        {
            Guid userId = new Guid(Convert.ToString(Request.QueryString["u"].ToString()));
            objUsers.Id = userId;
            objUsers.Status = "T";
            objUsers.ModifiedOn = DateTime.UtcNow;
            string password = txtPassword.Text;
            string newass = hdfPassword.Value;
                       }
        catch
        {
            Response.Write("There is some error while deleting the account.");
        }

    }
}

Please help me, when i tried to get it by alert() it returning the entered value in textbox. but in code behind it comes "". i am totally confused why its happening?Please help me.

Answer 1

From the top of my head, I think this is because when using jQuery UI Dialog, it actually takes the contents of the <div> and then appends this to the body of the html.

As a result, the <input> tags are now outside of the <form> tag.

So on PostBack the controls are not actually posted within the content of the request.

Here are some solutions to the problem.

Input inside Jquery UI Dialog not being sent?

jQuery UI Dialog with ASP.NET button postback