# Reset on Submit
<div id="demo-content" class="not-prose demo-container min-h-[380px]"></div>
## Basic usage
On the client, wrap your inputs in a `<form>` and use [`hx-on`](https://four.htmx.org/reference/attributes/hx-on) to reset it after each successful request.
```html
<form hx-post="/chat"
hx-target="#messages"
hx-swap="beforeend"
hx-on:htmx:after:request="this.reset()">
<input type="text" name="message">
<button>Send</button>
</form>
<div id="messages"></div>
```
- [`hx-post`](https://four.htmx.org/reference/attributes/hx-post) submits the form to `/chat`.
- [`hx-target`](https://four.htmx.org/reference/attributes/hx-target) points at the `#messages` container.
- [`hx-swap`](https://four.htmx.org/reference/attributes/hx-swap)=[`"beforeend"`](https://four.htmx.org/reference/attributes/hx-swap#beforeend) appends each new message to the bottom.
- [`hx-on:htmx:after:request`](https://four.htmx.org/reference/attributes/hx-on) listens for the [`htmx:after:request`](https://four.htmx.org/reference/events/htmx-after-request) event and calls `this.reset()` to clear the form.
On the server, respond with the new message:
```html
<div class="message user">Hello!</div>
<div class="message bot">Hi there! How can I help?</div>
```
## Notes
### Without a form element
The `reset()` method is only available on `<form>` elements. For standalone inputs, select the element and clear its value directly:
```html
<input id="chat-input" type="text" name="message">
<button hx-post="/chat"
hx-target="#messages"
hx-swap="beforeend"
hx-include="#chat-input"
hx-on:htmx:after:request="document.getElementById('chat-input').value = ''">
Send
</button>
```
- [`hx-include`](https://four.htmx.org/reference/attributes/hx-include) tells the button which input to include in the request, since it is outside the button element.