1

我正在尝试向 Shopify 电子商务网站添加一些验证，以便用户在单击“继续结帐”按钮时必须确认他们的国家/地区。它使用普通的 JavaScriptconfirm()对话框完美地工作，但我希望能够在弹出窗口中使用 HTML，所以我正在尝试使用 JQuery UI。

JQuery UI 弹出并停止提交表单（尽管花了一段时间才弄清楚），但我不知道在用户单击确认按钮后如何提交表单。我找到了两种阻止表单前进的方法，使用 e.preventDefault 并使 Proceed 按钮 atype="button"而不是 a type="submit"。通过这两种方式，表单将不再提交。

表格标题：

<form action="/cart" method="post" id="cartform" class="clearfix">

按钮的 HTML 代码使用type="submit"：

<div class="submit-cart">
    <div id="checkout-proceed">
        <input class="btn-reversed btn" type="submit" id="update-cart" name="checkout" value="Proceed to Checkout" />
        {% if additional_checkout_buttons %}
        <div id="additional-checkout-buttons">
          <span id="additional-checkout-buttons-label">Or check out using:</span>
         {{ content_for_additional_checkout_buttons }}
        </div>
        {% endif %}                       
    </div>
</div>

在使用上述 HTML 提交表单时实际工作的“普通”JavaScript 代码：

$(document).ready(function(){
    $(".submit-cart input[type='submit'],.submit-cart input[type='image']").click(function(event){
        var x=confirm("Please confirm that you are ordering from the USA. \nIf you are ordering from Europe, please use the European store (...).");
        if (x == true) {
            $(".submit-cart input").submit();
        } else {
            return false;
        } 
    });
});

我试图使用JQuery 代码type="submit"来提交表单，并将 HTML 按钮设置为使用e.preventDefault以阻止它在单击时提交。

$(document).ready(function(){
    $(".submit-cart input[type='submit'],.submit-cart input[type='image']").click(function(event){
        event.preventDefault();
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:300,
            width: 400,
            modal: true,
            buttons: {
                "Confirm": function() {
                    return true;
                    $(".submit-cart input").submit();
                },
                Cancel: function() {
                    $(this).dialog("close");
                    return false;
                }
            }
        }); 
    });
});

将 HTML 按钮更改为type="button"而不是 后submit，这是我尝试用来提交表单的JQuery 代码。

$(document).ready(function(){
    $(".submit-cart").click(function(){
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:300,
            width: 400,
            modal: true,
            buttons: {
                "Confirm": function() {
                    return true;
                    $("#cartform").submit();
                },
                Cancel: function() {
                    $(this).dialog("close");
                    return false;
                }
            }
        }); 
    });
});

购物车页面上还有一个“使用 PayPal 付款”按钮，允许用户使用 PayPal 付款。这个按钮实际上似乎使用 type="button" 方法正确提交。

4

1 回答 1

0

使用提交功能

$('#cartform').submit();
于 2012-11-29T20:56:42.843 回答