如何让htmx响应触发Django消息应用的表单重置操作

你自定义的submitForm函数里调用原生form.submit()会绕过htmx绑定的异步提交逻辑，导致htmx的请求没有触发，同时表单重置操作是在提交后立即执行，请求还未发出内容就被清空，自然无法正常提交消息。

方案1：使用htmx内置事件属性（最简便） #

直接给form标签添加hx-on::after-request属性即可，无需额外编写自定义提交逻辑，同时删除button上的onclick属性：

<form 
  id="message-form" 
  class="chat-form rounded-pill bg-dark" 
  data-emoji-form="" 
  hx-post="{% url "chat:create-message" object.pk %}" 
  hx-target="#new-message-div"
  hx-on::after-request="this.reset()"
>
...
<!-- 移除button的onclick属性 -->
<button class="btn btn-icon btn-primary rounded-circle ms-5" type="submit"> </button>
</form>

如果只需要提交成功时才重置表单，可以把hx-on::after-request换成hx-on::success。
如果你的htmx版本低于1.9.0，使用旧版hx-on语法即可：hx-on="htmx:afterRequest: this.reset()"。

方案2：通过事件监听实现 #

如果需要更灵活的控制逻辑，可以单独编写事件监听代码：

document.getElementById('message-form').addEventListener('htmx:afterRequest', function() {
  this.reset();
});

同样需要删除button上的onclick属性，依赖htmx原生的表单提交逻辑处理请求即可。

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