提交时打开灯箱.如果灯箱关闭，提交表单.如果链接被点击，不要提交

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

本文关键字：提交 如果 链接 表单      更新时间：2023-09-26

我有一个类似的HTML表单:

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

我也有一个隐藏的div像这样:

<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>

在提交表单时，我想在一个花哨的弹出窗口中显示隐藏的div(停止表单提交)。

如果用户选择查看特别优惠，则表单提交应完全取消，并应重定向用户。

如果用户选择关闭fancybox弹出框(通过任何方式)，用户的表单应该现在被提交。

我目前拥有的JS是:

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

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

这显然会导致循环，每次我试图关闭fancybox窗口而不查看特殊优惠时，都会显示该窗口。

我如何阻止这种情况的发生?

试试这样

$('#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
     });
 });

这实际上是一种荒谬的做法。

我想要的是发布和进入一个页面，但是我有两个提交按钮。

我没有意识到的是，我可以隐藏一个提交按钮(display:none)，在它触发灯箱的地方放一个锚，然后当点击灯箱上的关闭按钮时，它会触发点击隐藏的输入

相关文章：