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使用按钮提交表格

回答

相关问题