On submit open lightbox. If lightbox closed, submit form. If link clicked, do not submit

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.

Oof, a -1 is a little harsh? I asked with the intention of getting an answer, but after an hour of thinking about it realised it was a silly idea... — PaulSkinner, Jan 21 '13 at 17:06

score 0 · Answer 1 · answered Jan 21 '13 at 13:28

0

try something like this

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

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

answered Jan 21 '13 at 13:28

bipen

36,319
9
49
62

That does stop it looping, but unfortunately doesn't submit the form for me when clicking the .fancybox-close-link button (it does close the fancybox though) – PaulSkinner Jan 21 '13 at 13:58
this should submit the form too... whn close buttonis clicked – bipen Jan 21 '13 at 14:01
My apologies for wasting your time. I realised I was going about what I was doing in completely the wrong way, and what I was trying to do (which is badly explained here) was actually impossible. – PaulSkinner Jan 21 '13 at 15:11

score 0 · Accepted Answer · answered Jan 21 '13 at 15:15

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.

On submit open lightbox. If lightbox closed, submit form. If link clicked, do not submit

2 Answers2