同一个表单的两个提交按钮（具有不同的操作）答案

【问题标题】：Two submit buttons (with different action) for the same form同一个表单的两个提交按钮（具有不同的操作）
【发布时间】：2016-05-11 03:48:26
【问题描述】：

我有一个需要两个提交按钮的 html 表单。单击时，每个按钮都需要捕获事件（表单提交），然后处理表单数据并在 GUI 中向前或向后移动，具体取决于按下了两个按钮之一。

我还没有找到一种方法来在 Javascript 中捕获在提交事件处理程序中按下了哪个按钮。使用 click 事件处理程序时，此操作不会附加任何表单。有什么建议吗？

【问题讨论】：

标签： javascript html

【解决方案1】：

我更喜欢使用表单的submit 事件而不是click 事件，它包括一个submitter 属性，指示单击了哪个按钮。（奖励：表单在submit 被解雇之前得到验证）。

form.addEventListener('submit', (event) => {
  if (event.submitter.name === 'action-a') doActionA();
  else if (event.submitter.name === 'action-b') doACtionB();
});

编辑：事实证明SubmitEvent.submiter 是一个相对较新的功能，可能不适用于某些浏览器[1]。我切换到以下方法：

let submitter = '';
buttons.forEach((btn) => btn.addEventListener('click', () => submitter = btn.name));
form.addEventListener('submit', (event) => {
  if (submitter === 'action-a') doActionA();
  else if (submitter === 'action-b') doACtionB();
});

[1]https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter#browser_compatibility

【讨论】：

【解决方案2】：

事件对象上有一个名为target 的属性，它是对触发事件的DOM 节点的引用。它应该包含被点击的按钮。

【讨论】：

是的，但是event.target 带来了所有的表单对象，比如输入和两个按钮，我还没有找到一种方法来捕捉哪个按钮触发了事件。
能否绑定到按钮上的点击事件，而不是监听表单上的提交事件？
如果我这样做，点击事件不会带来表单，只需将按钮作为事件。我需要表单来处理数据。

【解决方案3】：

为 2 个按钮使用 2 个不同的名称并捕获点击事件。该名称可以让您识别并处理按下的指定按钮。

【讨论】：

当我捕获点击时，附加的事件只带来点击的按钮，而不是所有的表单及其输入。我需要表格来处理它。
您可以在按钮单击期间传递表单对象。您可以调用 Javascript 函数并传递表单对象。
类似的东西..
名字：
姓氏：
实际上我使用的是 javascript 而不是 ASP。如果可以，请在您的示例中展示如何捕获：1.表单数据 2.单击的按钮。

【解决方案4】：

如https://jsfiddle.net/0fuq5dhf/1/所示：

var form = document.getElementById("frmData");
form.addEventListener("click", function(event) {
    var formData = $( '#' + event.currentTarget.id ).serialize();
  if(event.target.id == "submit1") {
    //Process for first submit button
    console.log(formData);
  } else {
    //process for the 2nd submit button
    console.log(formData);
  }

});

您可以获取目标来确定单击了哪个按钮，并根据单击的按钮序列化要处理的表单数据。

【讨论】：

您能否展示如何在代码中序列化数据？目前它正在记录到控制台而不是序列化。
@Deiva, event.target.id 实际上返回的是表单 ID，而不是按钮 ID。
这取决于您附加处理程序的方式/事件。如果您看到小提琴网址，我将附加表单的点击事件。另一种方法可能是为按钮本身附加事件。
感谢@Deiva，它确实有效，但可能不是有效的方式，因为每次点击表单的任何区域（如输入）时都会运行点击功能。