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

我有一个表单，有两个提交按钮：一个更新购物车中的物品数量，另一个允许用户继续结帐。如果购物车中没有“配送”项目，那么我希望用户不能结账。我仍然希望用户能够更新数量

我最初使用的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

代码添加一个条件。但我找不到这样一个字段（我读到一些提示，这些信息不存在）

---

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

我看到了您现在所做的操作，您引用的是表单，而不是按钮。没问题，您只需要使用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>

$（“#form1”）.find（'input[type=submit]'）。on（'click'，函数（e）{
警报（$（e.target.val（））；
如果（$（e.target）.val（）=='submit 1'）{
e、 预防默认值（）；
}否则{
//做点别的
}
});

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

---

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

您只需

返回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;
    }
});

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

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

手动提交表单。
e.target似乎为我提供了正在提交的DOM元素，即表单。您能给我一个示例，说明如何使用e.target来确定单击哪个提交按钮来提交表单吗？给定一个具有多个提交按钮的表单，我可以单独控制它们吗？例如，如果有两个提交按钮A和B，我可以在提交处理程序中编写逻辑，使其在A提交表单时以某种方式运行，在B提交表单时以另一种方式运行吗？如果您想控制离散按钮的onsubmit事件，我同意Eric J的建议。@Zigy您完全可以，我发现了你的问题所在，并更新了我的答案。这是一个很好的选择，但我实际上没有访问表单的权限。我不能触摸表单本身，我只知道它有多少个按钮。好的，然后，将它们绑定到click事件，然后在不需要时使用preventDefault（）停止提交。我在一个简单的演示表单中测试了这一点，但只在Chrome上进行了测试，它起了作用……就像下面@TheWeirderd的帖子一样。如果在没有任何特殊ID或类的情况下无法选择按钮，则可以使用.first（）和.last（）或：first和：lastI实际上无权访问表单本身，因此按钮将始终提交表单。我编写了一个click处理程序来防止默认值，但这似乎并没有阻止表单提交。你能举个例子吗？@Ziggy:如果你能为一个按钮编写一个点击处理程序，你可以随时阻止它提交表单。只需
返回false。@EricJ。问题是他不知道如何引用表单中的元素。他引用的是表单id，而不是按钮id，直到我意识到：P.我刚刚发布了一个使用jQuery选择器访问按钮元素的解决方案，我才明白问题出在哪里。