多提交按钮PHP表单：如何获取点击的提交按钮ID（JavaScript）

方案1：给每个提交按钮单独绑定点击事件 #

直接为每个提交按钮绑定click事件，这样点击时event.target就是对应的按钮，能直接拿到ID。需要先阻止按钮的默认提交行为，等BootBox确认后再手动完成提交（避免循环触发事件）。

示例代码 #

HTML部分：

<form id="pageFormMultiSubmit" method="POST">
  <!-- 表单输入内容 -->
  <button type="submit" id="btnSave">保存</button>
  <button type="submit" id="btnDelete">删除</button>
  <button type="submit" id="btnPublish">发布</button>
  <button type="submit" id="btnDraft">存草稿</button>
</form>

JavaScript部分：

// 获取表单下所有提交按钮
const submitBtns = document.querySelectorAll('#pageFormMultiSubmit [type="submit"]');

submitBtns.forEach(btn => {
  btn.addEventListener('click', function(e) {
    // 先阻止默认提交
    e.preventDefault();
    const btnId = this.id;
    
    // 弹出BootBox确认框
    bootbox.confirm({
      message: `确认执行${btnId === 'btnSave' ? '保存' : btnId === 'btnDelete' ? '删除' : btnId === 'btnPublish' ? '发布' : '存草稿'}操作？`,
      buttons: {
        confirm: { label: '确认', className: 'btn-success' },
        cancel: { label: '取消', className: 'btn-danger' }
      },
      callback: function(result) {
        if (result) {
          // 确认后触发按钮原生提交（绕过绑定的click事件）
          btn.dispatchEvent(new Event('submit'));
          // 也可以直接提交表单：document.getElementById('pageFormMultiSubmit').submit();
          // 注意：用form.submit()不会传递按钮的name/value，后台需要区分按钮的话，建议用前者或加隐藏字段
        }
      }
    });
  });
});

方案2：利用表单submit事件的event.submitter属性 #

HTML5标准里，表单的submit事件对象包含submitter属性，直接指向触发提交的按钮元素，不需要单独给按钮绑事件。

示例代码 #

const form = document.getElementById('pageFormMultiSubmit');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  const submitBtn = e.submitter;
  if (!submitBtn) return; // 排除无按钮触发的提交场景
  
  const btnId = submitBtn.id;
  
  bootbox.confirm({
    message: `确认执行${btnId === 'btnSave' ? '保存' : btnId === 'btnDelete' ? '删除' : btnId === 'btnPublish' ? '发布' : '存草稿'}操作？`,
    buttons: {
      confirm: { label: '确认', className: 'btn-success' },
      cancel: { label: '取消', className: 'btn-danger' }
    },
    callback: function(result) {
      if (result) {
        // 移除当前submit事件监听，避免循环触发
        this.removeEventListener('submit', arguments.callee);
        // 提交表单
        this.submit();
      }
    }.bind(this) // 绑定this为当前表单元素
  });
});

注意事项 #

• 用form.submit()提交时，不会触发表单的submit事件，也不会把按钮的name/value传给后台。如果后台需要区分是哪个按钮触发的提交，优先用方案1，或者手动加隐藏字段记录按钮ID。
• event.submitter不兼容IE浏览器，需要兼容旧版浏览器的话选方案1。

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