ASP.NET form fields not posting from colorbox

Question

I have a form that displays inside a jQuery color window. When the form is submitted, the fields in this form are not sent back to the page. I modified javascript to save form fields in hidden fields on submit and those that are called back. The problem is that since this is a login window, I really don't want to move the password like this. The main content of the form is located inside the update panel. Here is the code for my homepage:

<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 are some of the default code for my main page using the main 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 is properly hosted, but the username and password DO NOT ensure that I copy it to hidden fields before posting. I guess maybe this is a conflict with the update panel? I initially tried to get an input control that works in the update panel, but read on the forums that there is a known issue with this.

Any understanding of this would be greatly appreciated. I use firebug and I can confirm that the fields are simply not in the message, so ASP does not find them.

Answer 1

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

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

Hope this helps someone else!

Answer 2

I have never used jQuery colorbox, but I had a similar problem with the jQuery modal popup. What he was doing was when I connected the popup, he moved the contents of the div outside the asp.net form so that the controls would not go back.

Answer 3

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

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

Answer 4

It’s just that you had a similar problem with colorbox and shape, solved it that way. My problem was that submit did not work, as the field sets were formless; Therefore, if your form does not submit to colorbox, try this by sending the form identifier as 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; });