Using a JQuery Overlay, with an external page that contains a form

Question

I have been using some of the flowplayer jquery tools and have had reasonable success. I use their overlay to load other pages, play videos and the like. I now have a requirement to put a form in the overlay and this displays fine. However, the submit button doesn't seem to have any effect.

I put a link on the overlay to load a page and that page loads in the background window - not the overlay. So, I'm thinking that maybe the submit button is being "processed" for want of a better term by the holding/background page and not by the overlay.

Does anyone have any ideas how I may get the code to realise the button needs to be processed by the overlaid page?

So, lets call the page with the link on it Page 1, if a user clicks a link on Page 1, then an overlay pops up and into that Overlay is loaded Page 2. It is the Page 2 submit button that is ineffective in the Overlay. If I load Page 2 into the browser as a normal window then all is fine.

Reading the documentation on the FLowplayer site is difficutl as it has an error on that page :(

Anyone any ideas?

This is the form that is loaded into the overlay:

<h1>Send Email to Test Role</h1><link href="css/form.css" rel="stylesheet" type="text/css" /><form action='' method='post'  name='form_mem1' id='form_mem1' />
<fieldset><legend>Send Contact Email</legend><div><label for='from_email'>From*:     </label><input type='text' id='from_email' name='from_email' value=''  /><br /><br /></div>
<div><label for='subject'>Subject*: </label><input type='text' id='subject' name='subject' value=''  /><br /><br /></div>
<div><label for='message'>Message*: </label><textarea id='message' name='message'  cols=120 rows=12></textarea><br /><br /></div>
<div><input type='reset' name='form1_reset' value='Reset  Form' ></input><input type='submit' name='form1_submit' value='Send Email' ></input></div></fieldset></form>

This is the trigger for the overlay to be loaded:

<div id="box0" class="dialog_modal"><div style="text-align:center"><span id="txt0"></span></div></div><td align="center" valign="center"><a href="email_form.php?to=469&from=313" class="click_email" rel="#modal_email">chairman AT hoverfc DOT com</div>

So, when someone clicks on the link (the overlay trigger) with the specified class (click_email) it causes email_form.php to be loaded into the contentWrap div container using the styles specified by modal_email.

This is the script that causes the overly to load:

<script type="text/javascript">
        $(document).ready(function(){
            $("a.click_email").overlay(
                    {
                        mask: '#789',
                       effect: 'apple',
                //configure the options for the overlay
                    onBeforeLoad: function() {

                    // grab wrapper element inside content
                    var wrap = this.getOverlay().find(".contentWrap");

                    // load the page specified in the trigger
                    wrap.load(this.getTrigger().attr("href"));
                    }



                });
        })
        </script>

This is the relevant css if helpful:

#modal_email {
    display:none;
    background-image:url(/images/jq/overlay_transparent_110pc.png);
}
#modal_email h1 {font-size:1em;}

Answer 1

Can you post a link to a test location where you're trying to use this script? So I can see it the context :)

Answer 2

Sure - a test location can be found here. The code may not match 100% to what I posted above as I've tried other minor things, but it's pretty much the same.

http://hrfcdev.spboard.vm.bytemark.co.uk/index.php?p=club&sp=contacts

The page displays a list of contacts; the fourth column looks like an email address - but with DOT and AT instead of . and @

If you click that, then the overlay will open and present you with a form. You can put pretty much what you like in the fields as the post data is not being returned - well, not to the right place!

if you use email_form.php instead of index.php etc. above and just click the send button then you will see the form replies to you with validation errors. It is that page (email_form.php) that is loaded into the overlay.

Sorry - it won't allow me to enter a second url :(

Many Thanks