获取表单提交按钮名称与值的高兼容方案及SubmitEvent.submitter降级方法

现代浏览器方案：SubmitEvent.submitter #

在支持现代标准的浏览器中，直接通过表单submit事件对象的submitter属性就能拿到触发提交的按钮元素，进而读取其name和value：

const form = document.getElementById('target-form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const triggerBtn = e.submitter;
  if (triggerBtn) {
    const btnName = triggerBtn.name;
    const btnValue = triggerBtn.value;
    // 执行后续业务逻辑
  }
});

但该属性完全不兼容IE，且Chrome 81、Firefox 75之前的旧版本也不支持，必须针对老旧环境做降级处理。

兼容性降级方案 #

方案1：通过点击事件记录触发按钮 #

核心逻辑是提前监听所有提交按钮的点击事件，将触发按钮的引用存入变量，在表单提交时读取该变量：

1. 声明作用域内变量存储触发按钮：

let triggeredSubmitBtn = null;

2. 给所有type="submit"的按钮绑定点击事件：

const submitBtns = document.querySelectorAll('button[type="submit"], input[type="submit"]');
submitBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    triggeredSubmitBtn = btn;
  });
});

3. 在表单提交事件中读取变量值：

form.addEventListener('submit', (e) => {
  e.preventDefault();
  if (triggeredSubmitBtn) {
    const btnName = triggeredSubmitBtn.name;
    const btnValue = triggeredSubmitBtn.value;
    // 执行逻辑
    // 重置变量，避免后续提交混乱
    triggeredSubmitBtn = null;
  } else {
    // 处理回车提交等未通过按钮点击触发的场景
    // 默认取页面第一个提交按钮的信息
    const defaultBtn = document.querySelector('button[type="submit"], input[type="submit"]');
    if (defaultBtn) {
      // 处理默认按钮逻辑
    }
  }
});

方案2：利用隐藏域存储触发信息 #

通过隐藏域把触发按钮的name和value传递到提交逻辑中，适合前后端都需要获取该信息的场景：

1. 在表单内添加两个隐藏域：

<form id="target-form">
  <!-- 其他表单元素 -->
  <input type="hidden" id="trigger-name" name="trigger-name">
  <input type="hidden" id="trigger-value" name="trigger-value">
  <button type="submit" name="action" value="save">保存</button>
  <button type="submit" name="action" value="delete">删除</button>
</form>

2. 给提交按钮绑定点击事件，写入隐藏域：

submitBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    document.getElementById('trigger-name').value = btn.name;
    document.getElementById('trigger-value').value = btn.value;
  });
});

3. 提交时直接读取隐藏域的值：

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const triggerName = document.getElementById('trigger-name').value;
  const triggerValue = document.getElementById('trigger-value').value;
  // 后续逻辑
});

这种方案的优势是后端也能直接通过表单参数拿到触发按钮的信息，无需额外处理。

注意事项 #

• 确保所有触发提交的元素type为submit，否则无法触发表单submit事件，也不会被上述方案捕获。
• 回车提交场景：用户在输入框按回车时，浏览器会自动触发第一个type="submit"的按钮，可在页面初始化时将第一个提交按钮的信息存入变量或隐藏域，避免空值问题。

内容的提问来源于stack exchange，提问作者buswedg