点击后自动禁用的Submit按钮无法提交表单的技术求助

我看你遇到的这个问题挺典型的——想实现点击提交按钮后显示加载状态、自动禁用按钮，但要么submit类型按钮禁用后表单发不出去，要么button类型按钮点了没反应。这其实是因为表单提交时机和按钮禁用的顺序搞反了，再加上不同类型按钮的默认行为差异导致的。

先拆解下你原有代码的问题：

• 对于type="submit"的按钮：你先调用form.submit()，紧接着设置disabled=true，但部分浏览器在处理表单提交时，会校验提交按钮的状态，一旦按钮被禁用就会中断提交流程，这就导致表单发不出去。
• 对于type="button"的按钮：这种按钮本身没有触发表单提交的默认行为，哪怕你代码里写了form.submit()，也可能因为逻辑顺序或者浏览器的事件优先级问题没生效。

修正后的可靠实现方案 #

这里提供两种适配不同按钮类型的解决方案，你可以按需选择：

方案一：适配type="submit"按钮（推荐）

我们先阻止按钮的默认提交行为，完全掌控流程，先更新按钮状态再手动提交表单，这样既保证状态更新，又不会影响表单提交：

<form action="test.php">
  <button type="submit" class="autobutton">Submit</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $(".autobutton").click(function(event) {
    // 阻止按钮默认提交行为，避免和自定义逻辑冲突
    event.preventDefault();
    
    const $btn = $(this);
    // 保存原始文本，添加加载图标
    const originalText = $btn.html();
    $btn.html('<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + originalText);
    
    // 先禁用按钮，防止重复点击
    $btn.prop('disabled', true);
    
    // 手动触发表单提交，这一步不受按钮禁用状态影响
    $btn.closest('form').submit();
  });
});
</script>

方案二：适配type="button"按钮

如果一定要用button类型按钮，必须确保显式触发表单提交，同时按正确顺序更新按钮状态：

<form action="test.php">
  <button type="button" class="autobutton">Submit</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $(".autobutton").click(function(event) {
    const $btn = $(this);
    const originalText = $btn.html();
    // 更新按钮显示状态
    $btn.html('<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + originalText);
    // 禁用按钮防止重复点击
    $btn.prop('disabled', true);
    
    // 手动触发表单提交，这是button类型按钮的必要步骤
    $btn.closest('form').submit();
  });
});
</script>

核心逻辑说明 #

• 对于submit按钮：阻止默认行为后，我们手动控制提交流程，先禁用按钮再提交，既避免了浏览器的状态校验问题，又能有效防止重复提交。
• 对于button按钮：必须显式调用form.submit()才能触发提交，这是这类按钮的特性决定的，之前的问题大概率是因为没有确保这一步的执行时机。

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