Reset after success

form.reset() clears a form from JavaScript. The two questions are when to call it and what it actually does, because both are less obvious than they look.

When

Only after the server confirms success, and only if an empty form is what the person wants next:

const response = await submitForm()

if (response.ok) {
  form.reset()
}

Never reset when the request starts. Never reset after an error. In both cases the person may need the values they typed, either to wait for the result or to fix one field and retry. Losing a long message to a failed request is the fastest way to make someone close the tab.

What reset really does

Reset doesn’t empty the form. It puts every control back to its default value, the one written in the HTML. Take these two controls:

<input name="country" value="Italy">
<input name="newsletter" type="checkbox" checked>

Type Denmark, uncheck the box, call form.reset(). The text goes back to Italy and the checkbox is checked again. Nothing is empty. The value attribute and the checked attribute are the defaults, and reset restores them.

This is why reset fits some forms and not others. For a “send another message” contact form, the defaults are empty and reset gives you a clean slate. For an account settings form, the defaults are the saved values, and reset would look like the save failed. There you don’t reset at all. You leave the new values in place, or you update the defaults to match what was saved.

Custom state doesn’t reset itself

Reset knows about native controls. It knows nothing about the things you built around them. A character counter, a live preview, a message you wrote with setCustomValidity(), an aria-invalid="true" you added: all of that stays.

Two ways to handle it. Clean it up in the same success path, right after form.reset(). Or listen to the form’s reset event, which fires for both form.reset() and a type="reset" button:

form.addEventListener('reset', () => {
  counter.textContent = '0 / 1000'
})

I prefer the event. It keeps the cleanup in one place, whoever triggers the reset.

File inputs

Reset clears file inputs too. If the form contained a 40 MB upload and the visitor is about to submit a second item that needs the same file, resetting forces them to pick it again. Think about the task before you call it.

Try this: build a small form with a default text value and a checked checkbox. Edit both, call form.reset() in the console, and look at what comes back. Then decide whether that’s the behavior your real form needs.