Add example for form reset pattern (#3100)

www/content/docs.md

@@ -1415,6 +1415,9 @@ be possible using a standard `on*` property, but it can be done using the `hx-on
 
 Here the `example` parameter is added to the `POST` request before it is issued, with the value 'Hello Scripting!'.
 
+Another usecase is to [reset user input](@/examples/reset-user-input.md) on successful requests using the `afterRequest`
+event, avoiding the need for something like an out of band swap.
+
 The `hx-on*` attributes are a very simple mechanism for generalized embedded scripting.  It is _not_ a replacement for more
 fully developed front-end scripting solutions such as AlpineJS or hyperscript.  It can, however, augment a VanillaJS-based
 approach to scripting in your htmx-powered application.

www/content/examples/_index.md

@@ -30,6 +30,7 @@ You can copy and paste them and then adjust them for your needs.
 | [Animations](@/examples/animations.md)                                      | Demonstrates various animation techniques                                                                                                          |
 | [File Upload](@/examples/file-upload.md)                                    | Demonstrates how to upload a file via ajax with a progress bar                                                                                     |
 | [Preserving File Inputs after Form Errors](@/examples/file-upload-input.md) | Demonstrates how to preserve file inputs after form errors                                                                                         |
+| [Reset User Input](@/examples/reset-user-input.md)                          | Demonstrates how to reset form inputs after submission                                                                                             |
 | [Dialogs - Browser](@/examples/dialogs.md)                                  | Demonstrates the prompt and confirm dialogs                                                                                                        |
 | [Dialogs - UIKit](@/examples/modal-uikit.md)                                | Demonstrates modal dialogs using UIKit                                                                                                             |
 | [Dialogs - Bootstrap](@/examples/modal-bootstrap.md)                        | Demonstrates modal dialogs using Bootstrap                                                                                                         |

www/content/examples/reset-user-input.md

@@ -0,0 +1,80 @@
++++
+title = "Reset user input"
+template = "demo.html"
++++
+
+This example shows how to easily reset user inputs using [`hx-on`](@/attributes/hx-on.md),
+allowing users to make multiple requests without having to manually delete their previous inputs.
+
+The inline script will run on the [`afterRequest`](@/events.md#htmx:afterRequest) event and ensures 
+that the form will reset to its initial state as long as the response has a 20x status code:
+
+```html
+<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>
+```
+
+The `reset()` method is only available on `form` elements. 
+For other elements, the input value can explicitly selected and reset to a default to achieve the same result.
+The following code is functionally equivalent:
+
+```html
+<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>
+```
+
+{{ demoenv() }}
+
+<script>
+
+    //=========================================================================
+    // Fake Server Side Code
+    //=========================================================================
+
+    // routes
+    init("/demo", function(request) {
+        return formTemplate();
+    })
+
+    onPost("/note", function(request, params) {
+        var note = params['note-text'];
+        if (note) {
+            return `<li>${note}</li>`;
+        }
+    })
+
+    // templates
+    function formTemplate() {
+        return `
+<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 primary">Add</button>
+</form>
+<ul id="notes"> </ul>`;
+    }
+</script>
+