HTMLFormElement: Submit Event - Web APIs | MDN

• Skip to main content
• Skip to search

HTMLFormElement: submit event Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

• Learn more
• See full compatibility
• Report feedback

The submit event fires when a <form> is submitted.

Note that the submit event fires on the <form> element itself, and not on any <button> or <input type="submit"> inside it. However, the SubmitEvent which is sent to indicate the form's submit action has been triggered includes a submitter property, which is the button that was invoked to trigger the submit request.

The submit event fires when:

• the user clicks a submit button,
• the user presses Enter while editing a field (e.g., <input type="text">) in a form,
• a script calls the form.requestSubmit() method

However, the event is not sent to the form when a script calls the form.submit() method directly.

Note: Trying to submit a form that does not pass validation triggers an invalid event. In this case, the validation prevents form submission, and thus there is no submit event.

In this article

• Syntax
• Event type
• Event properties
• Examples
• Specifications
• Browser compatibility
• See also

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

jsaddEventListener("submit", (event) => { }) onsubmit = (event) => { }

Event type

A SubmitEvent. Inherits from Event.

Event SubmitEvent

Event properties

In addition to the properties listed below, this interface inherits the properties of its parent interface, Event.

submitter Read only

An HTMLElement object which identifies the button or other element which was invoked to trigger the form being submitted.

Examples

This example uses EventTarget.addEventListener() to listen for form submit, and logs the current Event.timeStamp whenever that occurs, then prevents the default action of submitting the form.

HTML

html<form id="form"> <label>Test field: <input type="text" /></label> <br /><br /> <button type="submit">Submit form</button> </form> <p id="log"></p>

JavaScript

jsconst form = document.getElementById("form"); const log = document.getElementById("log"); function logSubmit(event) { log.textContent = `Form Submitted! Timestamp: ${event.timeStamp}`; event.preventDefault(); } form.addEventListener("submit", logSubmit);

Result

Specifications

Specification
HTML# event-submit
HTML# handler-onsubmit

Browser compatibility

See also

• HTML <form> element
• Related event: invalid

Help improve MDN

Was this page helpful to you? Yes No Learn how to contribute

This page was last modified on ⁨Oct 1, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content Filter sidebar

1. The HTML DOM API
2. HTMLFormElement
3. Instance properties
   1. acceptCharset
   2. action
   3. autocomplete
   4. elements
   5. encoding
   6. enctype
   7. length
   8. method
   9. name
   10. noValidate
   11. rel
   12. relList
   13. target
4. Instance methods
   1. checkValidity()
   2. reportValidity()
   3. requestSubmit()
   4. reset()
   5. submit()
5. Events
   1. formdata
   2. reset
   3. submit
6. Inheritance
   1. HTMLElement
   2. Element
   3. Node
   4. EventTarget
7. Related pages for HTML DOM
   1. BeforeUnloadEvent
   2. DOMStringMap
   3. ErrorEvent
   4. HTMLAnchorElement
   5. HTMLAreaElement
   6. HTMLAudioElement
   7. HTMLBRElement
   8. HTMLBaseElement
   9. HTMLBodyElement
   10. HTMLButtonElement
   11. HTMLCanvasElement
   12. HTMLDListElement
   13. HTMLDataElement
   14. HTMLDataListElement
   15. HTMLDialogElement
   16. HTMLDivElement
   17. HTMLDocument
   18. HTMLElement
   19. HTMLEmbedElement
   20. HTMLFieldSetElement
   21. HTMLFormControlsCollection
   22. HTMLFrameSetElement Deprecated
   23. HTMLHRElement
   24. HTMLHeadElement
   25. HTMLHeadingElement
   26. HTMLHtmlElement
   27. HTMLIFrameElement
   28. HTMLImageElement
   29. HTMLInputElement
   30. HTMLLIElement
   31. HTMLLabelElement
   32. HTMLLegendElement
   33. HTMLLinkElement
   34. HTMLMapElement
   35. HTMLMediaElement
   36. HTMLMenuElement
   37. HTMLMetaElement
   38. HTMLMeterElement
   39. HTMLModElement
   40. HTMLOListElement
   41. HTMLObjectElement
   42. HTMLOptGroupElement
   43. HTMLOptionElement
   44. HTMLOptionsCollection
   45. HTMLOutputElement
   46. HTMLParagraphElement
   47. HTMLPictureElement
   48. HTMLPreElement
   49. HTMLProgressElement
   50. HTMLQuoteElement
   51. HTMLScriptElement
   52. HTMLSelectElement
   53. HTMLSourceElement
   54. HTMLSpanElement
   55. HTMLStyleElement
   56. HTMLTableCaptionElement
   57. HTMLTableCellElement
   58. HTMLTableColElement
   59. HTMLTableElement
   60. HTMLTableRowElement
   61. HTMLTableSectionElement
   62. HTMLTemplateElement
   63. HTMLTextAreaElement
   64. HTMLTimeElement
   65. HTMLTitleElement
   66. HTMLTrackElement
   67. HTMLUListElement
   68. HTMLUnknownElement
   69. HTMLVideoElement
   70. HashChangeEvent
   71. History
   72. ImageData
   73. Location
   74. MessageChannel
   75. MessageEvent
   76. MessagePort
   77. Navigator
   78. PageRevealEvent
   79. PageSwapEvent
   80. PageTransitionEvent
   81. Plugin Deprecated
   82. PluginArray Deprecated
   83. PromiseRejectionEvent
   84. RadioNodeList
   85. TimeRanges
   86. UserActivation
   87. ValidityState
   88. Window
   89. WorkletGlobalScope
8. Guides
   1. Using microtasks in JavaScript with queueMicrotask()
   2. In depth: Microtasks and the JavaScript runtime environment