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. HTMLGeolocationElement Experimental
   24. HTMLHRElement
   25. HTMLHeadElement
   26. HTMLHeadingElement
   27. HTMLHtmlElement
   28. HTMLIFrameElement
   29. HTMLImageElement
   30. HTMLInputElement
   31. HTMLLIElement
   32. HTMLLabelElement
   33. HTMLLegendElement
   34. HTMLLinkElement
   35. HTMLMapElement
   36. HTMLMediaElement
   37. HTMLMenuElement
   38. HTMLMetaElement
   39. HTMLMeterElement
   40. HTMLModElement
   41. HTMLOListElement
   42. HTMLObjectElement
   43. HTMLOptGroupElement
   44. HTMLOptionElement
   45. HTMLOptionsCollection
   46. HTMLOutputElement
   47. HTMLParagraphElement
   48. HTMLPictureElement
   49. HTMLPreElement
   50. HTMLProgressElement
   51. HTMLQuoteElement
   52. HTMLScriptElement
   53. HTMLSelectElement
   54. HTMLSourceElement
   55. HTMLSpanElement
   56. HTMLStyleElement
   57. HTMLTableCaptionElement
   58. HTMLTableCellElement
   59. HTMLTableColElement
   60. HTMLTableElement
   61. HTMLTableRowElement
   62. HTMLTableSectionElement
   63. HTMLTemplateElement
   64. HTMLTextAreaElement
   65. HTMLTimeElement
   66. HTMLTitleElement
   67. HTMLTrackElement
   68. HTMLUListElement
   69. HTMLUnknownElement
   70. HTMLVideoElement
   71. HashChangeEvent
   72. History
   73. ImageData
   74. Location
   75. MessageChannel
   76. MessageEvent
   77. MessagePort
   78. Navigator
   79. PageRevealEvent
   80. PageSwapEvent
   81. PageTransitionEvent
   82. Plugin Deprecated
   83. PluginArray Deprecated
   84. PromiseRejectionEvent
   85. RadioNodeList
   86. TimeRanges
   87. UserActivation
   88. ValidityState
   89. Window
   90. WorkletGlobalScope
8. Guides
   1. Using microtasks in JavaScript with queueMicrotask()
   2. In depth: Microtasks and the JavaScript runtime environment