Question

I have an HTML form similar to:

<form id="cart-form">
    <input type="text" name="quantity" />
    <input type="hidden" name="sku" value="SKU123" />
    <input type="submit" name="submit" value="Submit" />
</form>

I also have a hidden div like thus:

<div id="cart-special-offers" style="display:none;"><p>Would you like to take a look at our <a href="/catalogue/category/543" class="ignore-form">current promotions</a>?</p>
    <p><a href="/catalogue/category/543" class="ignore-form">Yes please</a></p>
    <p><a href="#" class="fancybox-close-link">No thanks</a></p>
</div>

On submitting the form, I would like to display the hidden div in a fancybox popup window (halting the form submission).

If the user selects to view the special offers, the form submission should completely cancel, and the user should be redirected.

If the user selects to close the fancybox popup (by any means), the user’s form should now be submitted.

The JS I currently have is:

$('#cart-form').submit(function(){
    $.fancybox.open([
        {
            href : '#cart-special-offers'
        }
    ]);


    return false;

});

$('.fancybox-close-link').click(function(){
    $.fancybox.close();
    $('#cart-form').submit();
});

This obviously results in a loop, showing the fancybox window every time I try to close it without viewing the special offers.

How do I stop this from happening?

Thanks in advance.

Answer 1

This was in fact a ridiculous way of going about things.

What I wanted was to post and go to a page, but I had two submit buttons.

What I didn’t realise was I could hide one of the submit buttons (display:none), put an anchor in its place that triggers the lightbox, then when clicking the close on the lightbox it triggers a click on the hidden input.