表单提交至外部站点时禁用按钮显示提示，解决表单无法提交问题

嘿，这个问题我之前也碰到过！核心原因是当你在按钮的onclick事件里直接禁用它时，部分浏览器会把按钮状态的突然变化判定为“用户取消提交”，从而中断表单的提交流程；另外如果你的函数不小心返回了false，也会直接阻止默认的提交行为。

给你两个靠谱的解决方案，优先推荐第一个：

方案一：监听表单的onsubmit事件（更全面可靠） #

表单提交的触发方式不止点击按钮一种——用户按回车键也能提交，所以监听表单本身的onsubmit事件能覆盖所有场景，而且不会出现提交被中断的问题：

HTML 代码：

<form id="targetForm" action="你的目标URL" method="POST">
  <!-- 这里放你的表单字段，比如： -->
  <input type="email" name="user_email" required>
  <button type="submit" id="submitButton">提交</button>
</form>

JavaScript 代码：

// 获取表单元素
const form = document.getElementById('targetForm');
// 获取提交按钮
const submitBtn = document.getElementById('submitButton');

form.addEventListener('submit', function() {
  // 禁用按钮并修改文本
  submitBtn.disabled = true;
  submitBtn.textContent = 'Please wait...';
  
  // 这里不需要阻止默认行为，我们就是要让表单正常提交
});

方案二：修复按钮的onclick事件 #

如果你一定要用按钮的onclick来实现，可以给禁用操作加个极短的延迟，让浏览器先完成提交请求的触发，再修改按钮状态：

HTML 代码：

<form action="你的目标URL" method="POST">
  <!-- 表单字段 -->
  <button type="submit" onclick="handleSubmit(this)">提交</button>
</form>

JavaScript 代码：

function handleSubmit(btn) {
  // 延迟10毫秒再禁用按钮，给浏览器留足触发提交的时间
  setTimeout(() => {
    btn.disabled = true;
    btn.textContent = 'Please wait...';
  }, 10);
  
  // 必须返回true，确保不阻止默认的提交行为
  return true;
}

额外注意点： #

• 为什么要加延迟？因为有些浏览器在按钮被禁用的瞬间，会直接取消关联的表单提交动作，极短的延迟就能避开这个问题。
• 优先选onsubmit方案，它能处理所有提交场景，比如用户按回车提交的情况，onclick是做不到的。
• 如果你的表单需要先做异步验证（比如AJAX检查数据合法性），那得先调用e.preventDefault()阻止默认提交，验证通过后再手动调用form.submit()，同时禁用按钮。

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