重置用户输入

这个示例展示了如何使用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"><!-- 响应将显示在这里 --></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"><!-- 响应将显示在这里 --></ul>

🔗演示