JavaScript 和 HTML 表单 : Which button is the submitter?

Question

我正在编写一个 JavaScript 函数来预处理表单数据。我需要知道的一件事是使用了多个提交按钮中的哪一个。

大致而言，该脚本的轮廓如下。

var form=document.querySelector('form#test');
form.onsubmit=processForm;
function processForm() {
    //  how did I get here
}

<form id="test">
    <!-- usual stuff -->
    <button type="submit" name="check">Check</button>
    <button type="submit" name="doit">Do Stuff</button>
</form>

我知道我可以将该函数附加到各个提交按钮，但如果我将其附加到表单本身，它会更有弹性。

是否有表单属性或其他方法来检查使用了哪个提交按钮？

谢谢

Answer 1

您可以附加click每个 <button> 的处理程序元素，创建一个变量来存储点击的 button name属性或对元素的引用，访问 submit 处的属性或元素事件

function processForm(e) {
  e.preventDefault();
  console.log(curr) // `curr`: `name` of clicked `button"` element
}

var submit = document.querySelectorAll("button[type=submit]");
var curr;
for (var i = 0; i < submit.length; i++) {
  submit[i].onclick = function(e) {
    curr = e.target.name; // store reference to `name`, or element
  }
}