给定一个带有多个提交按钮的表单，我可以单独控制它们吗？

Question

我有一个带有两个提交按钮的表单：一个更新购物车中的商品数量，另一个让用户继续结帐。如果购物车中没有物品是“运输”物品，那么我希望用户不能结帐。我仍然希望用户能够更新数量。

原来我用的是这个javascript：

  $('#cartform').submit(function (e) {
    console.log(e)

    if ($('.item.shipping').length > 0) {
      // there are Shipping items in the cart, so proceed
      console.log("OK to checkout")
    } else {
      // there are no Shipping items so display help
      console.log("NO")
      e.preventDefault();
      $('#shipping-calculator-info p').text("Please select shipping destination.")    
    }
  });

我很快意识到这也禁用了更新数量按钮。

我最初的想法是从我要处理的按钮中捕获click 事件，并在其上捕获preventDefault。不过，这似乎并不能阻止提交的发生。接下来我想也许e，事件，可能有一个指定事件来源的字段——然后我就可以在上面的submit代码中添加一个条件。虽然我找不到这样的字段（并且我读到了此信息不存在的提示）。

如何防止同一表单上的多个提交按钮之一的默认操作？

Answer 1

我明白你现在做了什么，你引用的是表单，而不是按钮。没问题，您只需要使用 jQuery 很棒的选择器来查找提交按钮。这是一个工作示例：

<form id="form1" method="post" action="formDataHandler.php">
<input name='text1' type='text' value='text input'><br />
<input id='subBtn1' type='submit' value='submit 1'><br />
<input id='subBtn2' type='submit' value='submit 2'>
</form>

<script type="text/javascript">
$("#form1").find('input[type=submit]').on('click', function (e) {
alert($(e.target).val());
    if ($(e.target).val() == 'submit 1') { 
    e.preventDefault();
    } else {
        //do something else
    }
});
</script>

Answer 2

与其附加到表单的提交事件，为什么不附加到实际按钮的点击事件？

这样您就可以为每个按钮提供适当的代码。您可以在结帐按钮的处理程序中使用 JavaScript 提交表单，然后只需从更新按钮更新 DOM。

Answer 3

你只需要return false;。

$('#cartform').submit(function (e) {
    console.log(e)

    if ($('.item.shipping').length > 0) {
      // there are Shipping items in the cart, so proceed
      console.log("OK to checkout")
    } else {
      // there are no Shipping items so display help
      console.log("NO")
      e.preventDefault();
      $('#shipping-calculator-info p').text("Please select shipping destination.")    
      return false;
    }
});

Answer 4

您可以使用的快速解决方法是将提交按钮“转换”为简单按钮，然后将您的代码绑定到点击事件，并在适当的时候从点击事件中使用：

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

手动提交表单。