重置用户输入

此示例展示 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>Add a note</label>
        <input type="text" name="note-text" placeholder="blank canvas">
    </div>
    <button class="btn">Add</button>
</form>
<ul id="notes"><!-- Response will go here --></ul>

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

<div>
    <label>Add a note</label>
    <input id="note-input" type="text" name="note-text" placeholder="blank canvas">
</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 = ''">
    Add
</button>
<ul id="notes"><!-- Response will go here --></ul>