使用jQuery禁用提交按钮并修改文本后PHP $_POST变量未设置

问题根源 #

核心问题在于：禁用的表单控件不会被包含在表单提交的数据包中。当你点击按钮后立刻禁用它，再手动触发表单提交时，该按钮的name和value不会被发送到服务器，因此PHP端无法读取到$_POST['button']。

修复方案 #

以下两种方法均可满足你的需求：既实现按钮禁用防重复提交，又能让PHP正常获取按钮标识。

方法一：通过隐藏字段传递按钮信息 #

在禁用按钮前，将按钮的name和value存入表单的隐藏字段，即使按钮被禁用，隐藏字段的数据仍会被提交到服务器。

修改后的JavaScript代码：

$(document).ready(function() {
  $('button[type="submit"]').click(function(e) {
    // 阻止默认提交行为，避免重复触发
    e.preventDefault();
    
    const $btn = $(this);
    // 保存按钮的关键信息
    const btnName = $btn.attr('name');
    const btnValue = $btn.val();
    
    // 禁用按钮并修改文本
    $btn.prop('disabled', true).text('Please wait...');
    
    // 给表单添加隐藏字段，传递按钮标识
    const $form = $btn.closest('form');
    $form.append(`<input type="hidden" name="${btnName}" value="${btnValue}">`);
    
    // 手动提交表单
    $form.submit();
  });
});

方法二：延迟禁用按钮，优先触发表单提交 #

利用浏览器表单提交机制：浏览器会先收集所有未禁用控件的数据，再执行提交动作。因此可以先让表单正常触发提交，再延迟几毫秒禁用按钮，既保证数据发送，又能防止重复点击。

修改后的JavaScript代码：

$(document).ready(function() {
  $('button[type="submit"]').click(function(e) {
    const $btn = $(this);
    // 如果按钮已经禁用，直接阻止重复提交
    if ($btn.prop('disabled')) {
      e.preventDefault();
      return;
    }
    
    // 延迟10毫秒禁用按钮，让表单先完成数据收集
    setTimeout(() => {
      $btn.prop('disabled', true).text('Please wait...');
    }, 10);
  });
});

说明 #

两种方案都无需修改你的PHP代码，保持原有逻辑即可：表单提交后，PHP能正常读取$_POST['button']的值，判断哪个按钮被点击并输出对应提示。

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