重置用户输入

本示例展示了如何使用 hx-on 轻松重置用户输入，允许用户进行多次请求，而无需手动删除之前的输入。

内联脚本将在 afterRequest 事件上运行，并确保只要响应具有 20x 状态码，表单就会重置为其初始状态：

<form hx-post="/note"
      hx-target="#notes" 
      hx-swap="afterbegin"
      hx-on::after-request="if(event.detail.successful) this.reset()">
    <div class="form-group">
        <label>添加笔记</label>
        <input type="text" name="note-text" placeholder="空白画布">
    </div>
    <button class="btn">添加</button>
</form>
<ul id="notes"><!-- Response will go here --></ul>

reset() 方法仅适用于 form 元素。 对于其他元素，可以显式选择输入值并重置为默认值，以实现相同结果。 以下代码在功能上是等效的：

<div>
    <label>添加笔记</label>
    <input id="note-input" type="text" name="note-text" placeholder="空白画布">
</div>
<button class="btn primary" 
        hx-post="/note" 
        hx-target="#note" 
        hx-swap="afterbegin" 
        hx-include="#note-input"
        hx-on::after-request="if(event.detail.successful)
            document.getElementById('note-input').value = ''">
    添加
</button>
<ul id="notes"><!-- Response will go here --></ul>

🔗Demo