HTMX Form Reset After Submit

When a user submits a form with HTMX, the form does not reset automatically. The input fields keep their values. In many cases that is inconvenient — think of a comment box that should clear after posting, or a quick-add task field that should empty and wait for the next entry. This topic covers every method to reset a form after HTMX submission.

Why HTMX Does Not Auto-Reset Forms

Traditional browser form submission navigates to a new page, which naturally wipes the form. HTMX keeps the user on the same page, so the form stays populated. This is correct behavior in cases like an edit form — you want the user to see what they submitted. But for add-new or send-message forms, the form should clear on success.

Method 1: Server Returns an Empty Form

The cleanest approach is to have the server return a fresh, empty form as part of the response. Use hx-swap="outerHTML" on the form so the entire form element is replaced.

<form
  id="comment-form"
  hx-post="/comments"
  hx-target="#comment-form"
  hx-swap="outerHTML">
  <textarea name="body" placeholder="Write a comment..."></textarea>
  <button type="submit">Post Comment</button>
</form>

Server response on success (returns a fresh empty form):

<form
  id="comment-form"
  hx-post="/comments"
  hx-target="#comment-form"
  hx-swap="outerHTML">
  <textarea name="body" placeholder="Write a comment..."></textarea>
  <button type="submit">Post Comment</button>
</form>

HTMX replaces the submitted form (with user content) with the fresh form (blank). The result looks like a reset.

Method 2: hx-on After-Request Event

HTMX fires events at each stage of the request lifecycle. The htmx:afterRequest event fires after the server responds. You can reset the form inside an inline event handler using hx-on:

<form
  hx-post="/tasks"
  hx-target="#task-list"
  hx-swap="beforeend"
  hx-on:htmx:after-request="this.reset()">
  <input type="text" name="title" placeholder="New task...">
  <button type="submit">Add Task</button>
</form>

<ul id="task-list"></ul>

this.reset() calls the native browser form reset method. It clears all inputs, textareas, and selects back to their default values. This fires every time the request completes — including on error. To reset only on success, check the response status:

<form
  hx-post="/tasks"
  hx-target="#task-list"
  hx-swap="beforeend"
  hx-on:htmx:after-request="if(event.detail.successful) this.reset()">
  <input type="text" name="title" placeholder="New task...">
  <button type="submit">Add Task</button>
</form>

Method 3: JavaScript Event Listener

For more control, listen for the HTMX event in a script block:

<form id="quick-add" hx-post="/items" hx-target="#item-list" hx-swap="beforeend">
  <input type="text" name="name" id="item-input" placeholder="Item name...">
  <button type="submit">Add</button>
</form>

<ul id="item-list"></ul>

<script>
document.getElementById('quick-add').addEventListener('htmx:afterRequest', function(event) {
    if (event.detail.successful) {
        this.reset();
        this.querySelector('#item-input').focus();  // Return focus to input
    }
});
</script>

After a successful add, the input clears and the cursor moves back to the input field, ready for the next entry. This is a small detail that makes repetitive data entry much faster.

Visual Flow: Quick Add Task

  ┌────────────────────────────────────┐
  │ [_Buy milk______________] [Add]    │  ← User types task
  │                                    │
  │ • Wash the car                     │
  │ • Call the dentist                 │
  └────────────────────────────────────┘

  User clicks [Add]
       |
       v
  HTMX sends POST /tasks  (title=Buy milk)
       |
       v
  Server saves task, returns: <li>Buy milk</li>
       |
       v
  HTMX appends <li> to #task-list
  Form resets: input clears

  ┌────────────────────────────────────┐
  │ [________________________] [Add]   │  ← Input is clear, focused
  │                                    │
  │ • Wash the car                     │
  │ • Call the dentist                 │
  │ • Buy milk                         │  ← New item added
  └────────────────────────────────────┘

Resetting Specific Fields Only

Sometimes you want to clear only certain fields — not the entire form. For example, after posting a comment, clear the message body but keep the user's name field populated:

<form
  id="comment-form"
  hx-post="/comments"
  hx-target="#comments"
  hx-swap="beforeend">

  <input type="text" name="author" placeholder="Your name">
  <textarea id="comment-body" name="body" placeholder="Comment..."></textarea>
  <button type="submit">Post</button>
</form>

<script>
document.getElementById('comment-form').addEventListener('htmx:afterRequest', function(e) {
    if (e.detail.successful) {
        document.getElementById('comment-body').value = '';
    }
});
</script>

Only the textarea clears. The author's name stays filled in for their next comment.

Resetting After a Delay

For forms that show a success message inside themselves, a short delay before resetting lets the user see the confirmation:

<script>
document.getElementById('my-form').addEventListener('htmx:afterRequest', function(e) {
    if (e.detail.successful) {
        setTimeout(() => this.reset(), 2000);  // Reset after 2 seconds
    }
});
</script>

Key Takeaway

HTMX does not automatically clear forms after submission. Use the server-returns-empty-form pattern for maximum simplicity, or handle the htmx:afterRequest event to call form.reset() in JavaScript. Always check event.detail.successful before resetting so you preserve the user's input on failed submissions. Return cursor focus to the input field after reset to make repeated entries feel natural and fast.