点击后禁用提交按钮却陷入发送停滞的问题求助

先说说你两种写法出问题的原因：

• 第一种先调用this.form.submit()再禁用按钮：表单提交后页面会立刻刷新，浏览器还没来得及执行禁用代码就跳转了，所以按钮没被禁用，用户可能重复点击导致重复提交。
• 第二种先禁用按钮但没手动提交：禁用后的submit按钮没法触发表单的默认提交行为，所以表单没提交，按钮一直停留在“Sending…”状态。

给你两个靠谱的解决方案：

方案1：监听表单的submit事件（推荐） #

这种方式不管是点击按钮还是回车提交表单都能处理，覆盖场景更全。

1. 给表单加个ID：

<form id="comment-form" method="POST" ...>
  <!-- 表单内容 -->
  {{ comment_form.submit(class_="btn btn-primary") }}
</form>

2. 加一段JavaScript代码：

document.getElementById('comment-form').addEventListener('submit', function() {
  const submitBtn = this.querySelector('button[type="submit"]');
  if (submitBtn) {
    submitBtn.disabled = true;
    // 如果是input类型的提交按钮用value，button元素用textContent
    submitBtn.value = 'Sending…';
    // submitBtn.textContent = 'Sending…';
  }
});

这里不用手动调用submit()，因为监听的是表单的submit事件，默认提交行为会正常执行，同时禁用按钮防止重复点击。

方案2：修改按钮的onClick事件 #

如果一定要用onClick，调整顺序：先禁用按钮、修改文本，再手动触发表单提交，确保提交行为生效：

{{ comment_form.submit(class_="btn btn-primary", onClick="this.disabled=true; this.value='Sending…'; this.form.submit();") }}

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