Question

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 />
                    <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.

Answer 1

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!