Close Fancybox iframe on form submit using BUTTON tag - not working

According to the开发者_高级运维 Fancybox API, I am using the following code in an iframe:

<form>

... // form fields here

<button onclick="parent.$.fancybox.close();">
<span>Save</span>
</button>

</form>

The form actually closes when 'Save' is clicked -- but the form content is not submitted. It's like the close event is triggered before the form actually submits its content.

Without the onclick, content is submitted, but the subsequent page opens inside the iframe -- not what I want.

Is there a way around this?

Thanks for helping.

You can use event.preventDefault() method like this:

<form>

... // form fields here

<button onclick="event.preventDefault(); parent.$.fancybox.close();">
<span>Save</span>
</button>

</form>

Then submit the page using jquery

So it will be better to make it in a function like this:

function closeME()
{
   event.preventDefault(); 
   parent.$.fancybox.close();
   $('#myForm').submit();
}    
    ... // form fields here

    <button onclick="closeME();">
    <span>Save</span>
    </button>



    </form>

<form action="" method="post" id="myForm">
    ... // form fields here
    <button onclick="closeME();">
    <span>Save</span>
    </button>
</form>

    <script type="text/javascript">
        function closeME() {
            event.preventDefault();
            parent.$.fancybox.close();
            $('#myForm').submit();
        }
    </script>

I ended up solving this by creating buttons using multiple span (for style purposes) and a few lines of jQuery

<span id="save_btn" class="fc-button fc-button-prev fc-state-default fc-corner-left fc-corner-right">
        <span class="fc-button-inner">
            <span class="fc-button-content save_button">Save</span>
            <span class="fc-button-effect">
                <span></span>
            </span>
        </span>
</span>

<script>
$('#save_btn').click(function() {
  $('#my_form').submit();
});
</script>

This one works perfect me:

$('body',top.document).removeClass('fancybox-lock');
$('.fancybox-overlay',top.document).css('display','none');

All other things didn't work.

for other readers still having trouble getting fancybox to close from an iframe, it may be an issue with iframe being from a different origin as the parent window. that was the issue i was running into. Rob W provided an excellent solution using postMessage here Uncaught TypeError: Cannot read property 'fancybox' of undefined - Google Chrome only error?