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

Question

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

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

Answer 1

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

Answer 2

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

Answer 3

为2个按钮使用2个不同的名称，并捕获click事件。 该名称可让您识别并按指定的按钮进行操作。

Answer 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);
  }

});

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