javascript - htmx 応答でフォームのリセットをトリガーするにはどうすればよいですか?

Question

私は非常に基本的な Django メッセージング アプリケーションを作成してhtmxおり、メッセージの送信とレンダリングに使用したいと考えています。メッセージの投稿、保存、部分的なメッセージのレンダリングを問題なく行うことができます。ただし、フォームのテキストエリアがリセットされないという奇妙な問題が発生しています。したがって、メッセージを送信すると、スワップが挿入された後、古いメッセージがテキストエリアに残ります。これはあまり理想的ではありません。

次のように onclick イベントを追加して、テキストエリアを手動でクリアしようとしました。

HTML

<div id="new-message-div"></div>


<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">
...

{{ message_form }}

...

<button class="btn btn-icon btn-primary rounded-circle ms-5" type="submit" onclick="submitForm()"> </button>
</form>

スクリプト ( https://stackoverflow.com/a/14589251/12758446 )

<script>
function submitForm() {
   var message_form = document.getElementById('message-form');
   message_form.submit(); // Submit the form
   message_form.reset();  // Reset all form data
   return false; // Prevent page refresh
}
</script>

submitForm() に含まれているにもかかわらずmessage_form.submit()、フォームが送信されていませんが、テキストエリアがリセットされています。

質問：

メッセージを正常に送信してレンダリングした後、テキストエリアをリセットするにはどうすればよいですか?

https://github.com/legionscript/socialnetwork/blob/84375841429887e394a2a31e1b67919f81a3cb06/social/views.py#L428に基づく Django ビュー

def create_message(request, pk):
    message = None

    if request.htmx:
        thread = get_object_or_404(ThreadMessageModel, pk=pk)
        form = MessageModelForm(request.POST)

        if thread.receiver == request.user:
            receiver = thread.user
        else:
            receiver = thread.receiver

        if form.is_valid():
            message = form.save(commit=False)
            message.thread = thread
            message.sender_user = request.user
            message.receiver_user = receiver
            message.save()

        form = MessageModelForm()

        return render(request, 'chat/subtemplate/render_message.html', {'message': message})