JavaScript and forms
Reset after success
Clear a completed form at the right time and understand the difference between current values, default values, and calling reset.
8 minute lesson
Call form.reset() only after the server confirms success and when clearing the form matches the task.
const response = await submitForm()
if (response.ok) {
form.reset()
}
Reset restores every control to its initial value from the HTML. It does not always produce an empty form:
<input name="country" value="Italy">
<input name="newsletter" type="checkbox" checked>
After reset(), the text returns to Italy and the checkbox becomes checked again.
This is useful for a “send another message” form. It is wrong for an account settings form where the current saved values should remain visible.
Do not reset after a validation or network error. Preserve the values so the person can fix one field or retry.
Custom interface state may need separate cleanup. A character counter, preview, custom error message, or aria-invalid attribute does not necessarily reset itself. Listen for the form’s reset event or clear that state in the same success path.
File inputs are also cleared by reset. Confirm that behavior before resetting a form containing a large upload a person may not want to select again.
Set default values in a small test form, edit them, call form.reset(), and note what returns. Then decide whether reset matches the real task.
Lesson completed