Jquery使用按鈕提交表格

我想向Shopify電子商務網站添加一些驗證，以便用戶在點擊「繼續結帳」按鈕時必須確認他們的國家。它使用正常的JavaScript confirm()對話框完美工作，但我希望能夠在彈出窗口中使用HTML，所以我試圖使用JQuery UI。Jquery使用按鈕提交表格

JQuery UI彈出並停止提交表單（雖然花了一段時間才能確定），但我無法弄清楚在用戶單擊確認按鈕後如何提交表單。我發現了兩種停止表單的方法，使用e.preventDefault並使繼續按鈕成爲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代碼我試圖使用提交表單時HTML按鈕設置爲type="submit"使用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」按鈕。這個按鈕似乎使用type =「button」方法正確提交。

來源

2012-11-29 Recy

在對話框確認鍵回調，如果你'返回TRUE;你叫'submit'之前，您的通話將永遠不會被達到。 – jaudette

你能否顯示完整的表單代碼，現在，裏面只有按鈕。 – jaudette

使用提交功能

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

來源

2012-11-29 20:56:42 jaudette

我一直在使用它。使用jaudette所說的，我刪除了'return true;'並且它在#cartform上執行提交，但似乎並不正確，因爲它只是刷新頁面。 '（「。submit-cart input」）。submit（）;'看起來像是正確的，但是提交這個不會做任何事情。 – Recy

Jquery使用按鈕提交表格

回答

相關問題