ASP.NET Form Fields Not POSTing from colorbox

I've got a form that is displayed inside a jQuery colorbox. When the form is submitted, the fields within that form are not being posted back to the page. I modified the javascript to store the form fields into hidden fields on a submit and those DO post back. The problem is, since this is a login box, I really don't want to move the password around like that. The main form content is inside an update panel. Here is the code for my master page:

<form id="myform" runat="server" clientidmode="Static" method="post">
    <asp:ScriptManager ID="ecommerceManager" runat="server" ClientIDMode="Static" EnableViewState="False" EnablePageMethods="True">
        <Scripts>
            <asp:ScriptReference Path="~/js/jquery-1.6.1.min.js" />
            <asp:ScriptReference Path="~/js/jquery.colorbox.min.js" />
            <asp:ScriptReference Path="~/js/eCommerce.js" />
        </Scripts>
    </asp:ScriptManager>

    <div style="width: 940px; margin-left: auto; margin-right: auto;">
        <div align="left">
            TOP OF THE PAGE
            <asp:ContentPlaceHolder ID="bodyContent" runat="server" ClientIDMode="Static">
            </asp:ContentPlaceHolder>
            BOTTOM OF THE PAGE
        </div>
    </div>

    <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(closeLoading);
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(loadData);
    </script>
    </form>

Here is some of the code from my main default page that uses the master page:

<asp:Content ID="mainContent" ContentPlaceHolderID="bodyContent" runat="server">


    <asp:UpdatePanel ID="ecommerceUpdate" runat="server" ClientIDMode="Static">
        <ContentTemplate>

            <asp:Panel ID="pnlEcomMain" runat="server" CssClass="ecom_main" ClientIDMode="Static">
                <asp:HiddenField ID="statusField" runat="server" ClientIDMode="Static" ViewStateMode="Disabled" EnableViewState="False" />
                <asp:HiddenField ID="hdnUsername" runat="server" ClientIDMode="Static" ViewStateMode="Disabled" EnableViewState="False" />


                <div class="add_product">
                    <div class="add_product_menu text_12_bold">
                        <asp:Image ID="imgAddProducts" ImageUrl="~/images/ecom_icon_add_2.gif" CssClass="std_btn" AlternateText="Add Products" runat="server" ClientIDMode="Static" />Add Additional Products:<br /><br />
                        <asp:DropDownList ID="newproduct" runat="server" ClientIDMode="Static" 
                            onchange="addProduct()">
                        </asp:DropDownList>
                    </div>
                </div>
                </asp:Panel>

                <div class="clear"></div>

                <!--- HERE IS THE COLORBOX POPUP CONTENT --->
            <div style="display: none; visibility: hidden;">
                <div id="inline_login">
                    <p><strong>User Login Details Go Here</strong></p>

                    User Name: <asp:TextBox ID="loginName" runat="server" ClientIDMode="Static" EnableViewState="False" ViewStateMode="Disabled" /><br />
                    Password: <asp:TextBox ID="loginPassword" runat="server" TextMode="Password" ClientIDMode="Static" /><br />
             开发者_Go百科       <input type="button" name="loginBtn" id="loginbtn" value="Login" onclick="javascript:validateLogin()" />



                </div>
            </div>

            </asp:Panel>

            <asp:Label ID="xmlContent" runat="server" />
       </ContentTemplate>
    </asp:UpdatePanel>

</asp:Content>

The new product field properly posts, but the username and password doesn't UNLESS I copy it to the hidden fields before a post. I'm guessing maybe it's a conflict with the update panel? I was originally trying to get a Login Control working in the Update Panel but read in the forums that there is a known problem with this.

Any insight on this would very tremendously be appreciated. I'm using firebug and can confirm that the fields simply aren't in the post which is why ASP isn't finding them.

Apparently, despite being inside the form, the colorbox actually moves the content outside the form. I was able to resolve this by adding this line of code to my JavaScript submit function:

jQuery('#inline_login').appendTo('form'); 

Hope it helps someone else!

I have never used jQuery colorbox, but i had a similar problem with jQuery UI modal popup. What it was doing was, when i attached the popup it moved the content div outside of the asp.net form so the controls were not getting posted back.

Another option that worked for me in a particular .NET CMS (DNN) was to take Jack's fix and attach to the cbox_complete event. Posting in case someone else might find this useful.

$(document).bind('cbox_complete', function () {
    $("#colorbox, #cboxOverlay").appendTo('form:first');
});

Just had a similar problem with colorbox & form, solved it this way. My problem was that the submit wasn't working since the fieldsets were stripped of the form tag; So if your form isn't posting in colorbox, try this, sending in the form id as the href for the colorbox content

$(document).ready(function () {
        $('#login-trigger').click(function () {
            $.colorbox({
                inline: true,
                href: "#login-form",
                close: "×",
                onOpen: function () { $('#login-content').css({ display: 'block' }); },
                onClosed: function () { $('#login-content').css({ display: 'none' }); }
            });
            return false;
        });