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

手动提交表单。

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

4 个答案: