我们如何使 htmx 响应触发表单重置？

Posted 2023-02-24

【中文标题】我们如何使 htmx 响应触发表单重置？

【英文标题】：How do we make a htmx response trigger a form reset?

【发布时间】：2021-12-30 17:21:57

【问题描述】：

我正在创建一个非常基本的 Django 消息传递应用程序，并希望使用 htmx 发送和呈现消息。我能够毫无问题地发布、保存消息并呈现部分消息。但是，我遇到了一个奇怪的问题，我的表单 textarea 没有被重置。所以，我会发送一条消息，插入交换后，我的旧消息仍会在 textarea 中。这不是很理想！

我尝试通过添加一个 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://***.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()，但我的表单没有被提交，但 textarea 正在重置。

问题：

成功发送和呈现消息后，我将如何重置我的 textarea？

Django 视图，基于https://github.com/legionscript/socialnetwork/blob/84375841429887e394a2a31e1b67919f81a3cb06/social/views.py#L428

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)

【参考方案1】：

对于服务器端解决方案，您可以：

增加hx-target 中的目标以包含新消息和表单，以便在提交时替换两者。当然，这种情况下的响应部分需要调整。

保持现状，但在您的回复中包含表单以进行 oob（带外）交换 https://htmx.org/attributes/hx-swap-oob/。对于 oob 交换，将表单标记附加到带有属性 hx-swap-oob="true" 的新消息响应中。