Question

We have a web forms project and in it I want to use jQuery’s colorbox plugin to pop up a small window with a submit button. Because we are using web forms, the form tag cannot be part of the colorbox. The problem is that when colorbox loads the element in the DOM into the colorbox, it actually moves it to the top of the body into an absolutely positioned element.

Normally this is fine, but it actually takes the contents out of the form tag. This makes it so that submit buttons within the colorbox no longer cause post backs.

Here is a fiddle representing the problem:
http://jsfiddle.net/Chevex/vbLFD/

If you click the submit changes button you will notice that the form posts to google and the window loads with google. However, if you click the link to load the DIV into colorbox and then click the submit button from within colorbox, nothing happens. The button was taken out of the form tag.

Is there an easy fix for this behavior?

Edit

I thought of submitting the form with jQuery as in this fiddle: http://jsfiddle.net/Chevex/vbLFD/6/

The problem with that is if the DIV contained other input elements, like text boxes, then they too would be removed from the form tag. So even if the form gets submitted with jQuery, the input values that were supposed to be posted with the form will not be included.

It would seem the only way to fix this would be to have colorbox stay within the form somehow.

Answer 1

You can use a simple jQuery block to move it to the top of the main form.

$(document).ready(function() {
  var colorbox = $("#colorbox");
  colorbox.remove(); // Removes from dom
  $('form#idOfForm').prepend(colorbox);
});

Now anything you load in there should be within the global form.

An alternative selector you can use is body > form for the global form, but it’s not as fast as an id.