Alpine.js与HTMX联用：@click事件导致表单无法提交的问题

问题原因 #

你当前的实现中，点击按钮时通过@click立即设置submitted = true，导致按钮瞬间被禁用，HTMX还没来得及捕获表单提交事件（浏览器也可能因按钮禁用中断提交流程），所以表单无法通过HTMX正常提交。手动调用form.submit()会触发原生表单提交，绕开HTMX的处理逻辑，进而导致页面刷新。

最优解决方案：绑定HTMX生命周期事件控制状态 #

利用HTMX的原生事件同步Alpine.js的状态，能保证状态变化与HTMX的提交流程完全同步，从根源避免冲突：

修改后的完整代码 #

<div x-data="{submitted: false}">
  <div class="card card-auth">
    <div class="card-header pb-0 text-start">
      <h4 class="font-weight-bolder">Authenticate</h4>
    </div>
    <div class="card-body">
      <form 
        x-ref="authForm" 
        role="form" 
        hx-post 
        hx-swap-oob="true" 
        hx-target-error="#authentication_password"
        @htmx:before-request="submitted = true"
        @htmx:after-request="submitted = false"
      >
        {% csrf_token %}
        
        {% include "components/input.html" with form=form name="email" label="Email" placeholder="Email" %}
        
         <div id="authentication_password"></div>

         <div class="text-center">
           <button type="submit" class="" :disabled="submitted">
             Authenticate
             <i x-show="submitted" class="fa-solid fa-spinner fa-spin ms-2"></i>
           </button>
         </div>
       
       </form>
     </div>
   </div>
</div>

关键修改说明 #

• 移除按钮上的@click="submit()"，不再通过按钮点击触发状态变化
• 在<form>标签上绑定两个HTMX专属事件：
  • @htmx:before-request="submitted = true"：当HTMX准备发送请求时，设置加载状态为true，自动禁用按钮并显示加载动画
  • @htmx:after-request="submitted = false"：当HTMX请求完成（无论成功或失败）后，重置加载状态，恢复按钮可用状态

可选方案：保留按钮点击逻辑（可靠性稍弱） #

如果你坚持要通过按钮点击触发状态，可通过微小延迟确保HTMX先捕获提交事件，再禁用按钮：

<button 
  @click="setTimeout(() => submitted = true, 10)"
  type="submit" 
  class="" 
  :disabled="submitted"
>
  Authenticate
  <i x-show="submitted" class="fa-solid fa-spinner fa-spin ms-2"></i>
</button>

这种方式依赖定时器的时间精度，相比绑定HTMX事件的方案，可靠性略低，仅推荐在特殊场景下使用。

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