求助：表单提交按钮转加载器后，如何实现自动恢复功能

嘿，我来帮你搞定这个表单提交按钮的问题！你的核心痛点是按钮状态没有和AJAX请求的生命周期绑定，而且缺少重复提交的防护，导致用户会因为提示慢而重复点击。咱们一步步来修复：

核心问题分析 #

原来的代码用document.onfocus来恢复按钮，这完全是错误的触发时机——它会在用户切换窗口再回来时恢复按钮，不管请求有没有完成。正确的做法是：在AJAX请求完成（成功/失败）时，或者超时的时候，才恢复按钮状态。同时还要加一个“防止重复提交”的标记，避免用户在请求未完成时重复点击。

完整解决方案代码 #

1. HTML（微调，去掉内联onclick，用事件监听更规范） #

<div class="col-md-4 col-md-offset-4">
  <div id="formsubmitbutton">
    <button name="submit" type="button" class="btn btn-primary btn-block btn-lg" id="submitBtn">Send <i class="ion-android-arrow-forward"></i></button>
  </div>
  <div id="buttonreplacement" style="display:none;">
    <div class="cssload-container">
      <div class="cssload-whirlpool"></div>
    </div>
  </div>
</div>

注：把type="submit"改成type="button"，避免默认表单提交，完全由JS控制。

2. CSS（保留你的原有样式，无需修改） #

.cssload-container { 
  position: relative; 
  height: 40px; 
  width: 40px; 
  margin: auto; 
  margin-top: 2%; 
} 
.cssload-whirlpool, .cssload-whirlpool::before, .cssload-whirlpool::after { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  border: 1px solid #08d108; 
  border-left-color: rgb(0, 0, 0); 
  border-radius: 924px; 
  -o-border-radius: 924px; 
  -ms-border-radius: 924px; 
  -webkit-border-radius: 924px; 
  -moz-border-radius: 924px; 
} 
.cssload-whirlpool { 
  margin: -23px 0 0 -23px; 
  height: 40px; 
  width: 40px; 
  animation: cssload-rotate 1450ms linear infinite; 
  -o-animation: cssload-rotate 1450ms linear infinite; 
  -ms-animation: cssload-rotate 1450ms linear infinite; 
  -webkit-animation: cssload-rotate 1450ms linear infinite; 
  -moz-animation: cssload-rotate 1450ms linear infinite; 
} 
.cssload-whirlpool::before { 
  content: ""; 
  margin: -21px 0 0 -21px; 
  height: 41px; 
  width: 41px; 
  animation: cssload-rotate 1450ms linear infinite; 
  -o-animation: cssload-rotate 1450ms linear infinite; 
  -ms-animation: cssload-rotate 1450ms linear infinite; 
  -webkit-animation: cssload-rotate 1450ms linear infinite; 
  -moz-animation: cssload-rotate 1450ms linear infinite; 
} 
.cssload-whirlpool::after { 
  content: ""; 
  margin: -27px 0 0 -27px; 
  height: 52px; 
  width: 52px; 
  animation: cssload-rotate 2900ms linear infinite; 
  -o-animation: cssload-rotate 2900ms linear infinite; 
  -ms-animation: cssload-rotate 2900ms linear infinite; 
  -webkit-animation: cssload-rotate 2900ms linear infinite; 
  -moz-animation: cssload-rotate 2900ms linear infinite; 
} 
@keyframes cssload-rotate { 
  100% { 
    transform: rotate(360deg); 
  } 
} 
@-o-keyframes cssload-rotate { 
  100% { 
    -o-transform: rotate(360deg); 
  } 
} 
@-moz-keyframes cssload-rotate { 
  100% { 
    -moz-transform: rotate(360deg); 
  } 
}

3. JavaScript（重构核心逻辑，绑定AJAX生命周期） #

// 获取DOM元素
const submitBtn = document.getElementById('submitBtn');
const submitButtonContainer = document.getElementById('formsubmitbutton');
const loadingContainer = document.getElementById('buttonreplacement');

// 防止重复提交的标记
let isSubmitting = false;
// 超时时间（比如10秒，可根据你的PHPMailer速度调整）
const SUBMIT_TIMEOUT = 10000;

// 切换按钮状态的工具函数
function toggleButtonState(isLoading) {
  if (isLoading) {
    submitButtonContainer.style.display = 'none';
    loadingContainer.style.display = '';
  } else {
    submitButtonContainer.style.display = '';
    loadingContainer.style.display = 'none';
  }
}

// 提交表单的AJAX函数
function submitForm() {
  // 如果正在提交，直接返回，阻止重复点击
  if (isSubmitting) return;

  isSubmitting = true;
  toggleButtonState(true);

  // 获取表单数据（假设你的表单id是"contactForm"，根据实际修改）
  const formData = new FormData(document.getElementById('contactForm'));

  // 设置超时定时器
  const timeoutTimer = setTimeout(() => {
    isSubmitting = false;
    toggleButtonState(false);
    alert('提交超时，请稍后重试！'); // 可以换成更美观的提示组件
  }, SUBMIT_TIMEOUT);

  // 发送AJAX请求
  fetch('your-submit-script.php', { // 替换成你的PHP提交脚本路径
    method: 'POST',
    body: formData
  })
  .then(response => response.json()) // 确保PHP返回JSON格式的响应
  .then(data => {
    clearTimeout(timeoutTimer); // 清除超时定时器
    isSubmitting = false;
    toggleButtonState(false);

    // 根据PHP返回的结果处理提示
    if (data.success) {
      alert('提交成功！'); // 替换成你的成功提示
    } else {
      alert('提交失败：' + data.message); // 失败提示
    }
  })
  .catch(error => {
    clearTimeout(timeoutTimer);
    isSubmitting = false;
    toggleButtonState(false);
    console.error('提交出错：', error);
    alert('提交出错，请稍后重试！');
  });
}

// 绑定按钮点击事件
submitBtn.addEventListener('click', submitForm);

4. PHP端注意事项（PHPMailer部分） #

确保你的PHP提交脚本返回JSON格式的响应，比如：

<?php
// 引入PHPMailer依赖和配置
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'path/to/PHPMailer/src/Exception.php';
require 'path/to/PHPMailer/src/PHPMailer.php';
require 'path/to/PHPMailer/src/SMTP.php';

// 初始化PHPMailer并配置参数
$mail = new PHPMailer(true);
try {
    // 配置SMTP等参数...
    // 设置收件人、主题、内容...
    
    $mail->send();
    echo json_encode([
        'success' => true,
        'message' => '邮件发送成功'
    ]);
} catch (Exception $e) {
    echo json_encode([
        'success' => false,
        'message' => '邮件发送失败：' . $mail->ErrorInfo
    ]);
}
exit;
?>

关键改进点 #

• 绑定AJAX生命周期：按钮状态切换完全和请求的开始、成功、失败、超时绑定，不再依赖窗口聚焦这种不可靠的触发条件。
• 防止重复提交：用isSubmitting标记阻止用户在请求未完成时重复点击。
• 超时机制：设置固定超时时间，避免按钮一直处于加载状态（比如PHPMailer因为网络问题卡住）。
• 规范事件绑定：去掉内联onclick，用addEventListener更符合现代JS规范。

这样修改后，用户点击按钮后会立即显示加载器，PHPMailer提交完成（成功或失败）后自动恢复原按钮，同时超时也会恢复按钮，彻底解决重复提交的问题！

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