Question

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

JQuery UI会弹出并停止提交表单（尽管需要一段时间才能确定该表单）但我无法弄清楚在用户单击确认按钮后如何提交表单。我找到了两种方法来停止表单的进展，使用e.preventDefault并使Proceed按钮成为type="button"而不是type="submit"。通过这两种方式，表单将不再提交。

表单标题：

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

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

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

“正常”JavaScript代码，它实际上适用于使用上述HTML提交表单：

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

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

Answer 1

使用提交功能

$('#cartform').submit();

Jquery使用按钮提交表单

1 个答案: