jquery - ボタン付きのJquery送信フォーム

Question

ユーザーが [チェックアウトに進む] ボタンをクリックしたときに国を確認する必要があるように、Shopify e コマース サイトに検証を追加しようとしています。通常の JavaScriptconfirm()ダイアログを使用して完全に動作しますが、ポップアップで HTML を使用できるようにしたいので、JQuery UI を使用しようとしています。

JQuery UI がポップアップし、フォームの送信を停止します (それを理解するのに時間がかかりましたが) が、ユーザーが確認ボタンをクリックした後にフォームを送信する方法がわかりません。e.preventDefault を使用し、[続行] ボタンtype="button"を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;
        } 
    });
});

HTMLボタンをtype="submit"使用してフォームを送信するために使用しようとしていたJQueryコード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 で支払うことができる [Pay with PayPal] ボタンもあります。このボタンは、実際には type="button" メソッドを使用して適切に送信されているようです。

Answer 1

送信機能を使用する

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