Question

I have

window.onload = function()
{
    $('form').submit(function()
    {
        return false;
    });
};

Inside of the onload function, I later call Shadowbox.open(). Of course, I am passing options. Anyway, my form submits the entire page and fails to return false instead.

I have been looking for an actual working example of how to handle form submissions for a form that has been handed to Shadowbox. If you can point me to one, that would be amazing.

Thank you

Answer 1

What you have to do is:

1. use the iframe-player(when downloading shadowbox you must check the “External sites and pages”-checkbox)
2. provide a callback-function for onFinish, to be sure that the iframe exists before really submitting the form
3. change the form’s target-attribute to sb-player(that’s the name of the iframe created by shadowbox)

Example-code(will run a google-search in a shadowbox)

<script type="text/javascript">
Shadowbox.init();

$(function() 
  {
    $('form')
      .submit(function()
              {
                //reference to the form, needed in onFinish
                var me=this;

                Shadowbox.open({
                                  //we dont need to load a page
                                content: 'about:blank',
                                  //use the iframe-player
                                player:  'iframe',
                                height:  350,
                                width:   850,
                                options: {
                                          //send the form without 
                                          //triggering the submit-event
                                          //when the iframe is available
                                          onFinish:function()
                                                   {me.submit();}
                                         }
        });
        //set the iframe(the name is sb-player) as target of the form
          $(this).attr('target','sb-player');

        return false;
    });
});

</script>
<form action="http://google.de/search">
<input name="q" value="shadowbox">
<input type="submit">
</form>