如何用JQuery实现点击表单按钮提交并传递按钮Name与Value值？

这个问题我熟！很多人都会踩这个坑——核心原因是：只有用户手动点击按钮触发的表单提交，浏览器才会自动把该按钮的name和value打包进请求数据里。但如果是通过jQuery调用submit()方法触发提交，浏览器不会帮你带上按钮的信息，这就是你遇到的问题。

下面给你两种可靠的实现方案，按需选择：

方案一：动态添加隐藏字段后提交表单 #

这种方式最贴近原生表单提交的逻辑，适合需要保持表单默认提交行为（比如页面跳转）的场景。

第一步：调整HTML结构 #

把按钮设为type="button"，避免默认提交行为，同时确保按钮的name和value属性正确：

<form id="operationForm" action="/your-cms-api" method="POST">
  <!-- 你的其他表单字段 -->
  <input type="text" name="article_title" value="Demo Title">
  
  <button type="button" id="okBtn" name="action" value="confirm">OK</button>
  <button type="button" id="discardBtn" name="action" value="discard">Discard</button>
</form>

第二步：编写jQuery逻辑 #

监听按钮点击，动态添加对应按钮的隐藏字段，再提交表单：

$(document).ready(function() {
  // 统一处理按钮点击逻辑
  $('#okBtn, #discardBtn').click(function() {
    const $btn = $(this);
    const $form = $('#operationForm');
    
    // 先移除可能存在的同名字段，避免重复提交
    $form.find(`input[name="${$btn.attr('name')}"]`).remove();
    
    // 添加隐藏字段，把按钮的name和value传递进去
    $form.append(`<input type="hidden" name="${$btn.attr('name')}" value="${$btn.val()}">`);
    
    // 提交表单
    $form.submit();
  });
});

方案二：用$.post直接发送请求（无页面跳转） #

如果你的场景不需要页面跳转，更适合用这种异步请求的方式，手动拼接表单数据和按钮信息：

$(document).ready(function() {
  $('#okBtn, #discardBtn').click(function(e) {
    // 如果按钮是type="submit"，一定要阻止默认提交
    e.preventDefault();
    
    const $btn = $(this);
    const $form = $('#operationForm');
    
    // 获取表单现有数据（转为数组格式）
    const formData = $form.serializeArray();
    
    // 把当前按钮的name和value添加到数据数组中
    formData.push({
      name: $btn.attr('name'),
      value: $btn.val()
    });
    
    // 发送POST请求到CMS接口
    $.post($form.attr('action'), formData, function(response) {
      // 请求成功后的处理，比如提示用户操作完成
      alert('操作成功！');
      console.log('CMS返回:', response);
    }).fail(function(error) {
      // 请求失败的处理，比如提示错误信息
      alert('操作失败，请重试');
      console.error('请求错误:', error);
    });
  });
});

额外提示 #

如果你的按钮原本是type="submit"，记得在点击事件里调用e.preventDefault()，否则会触发浏览器默认的表单提交，导致两次请求。

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