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.

O evento submit é disparado quando é feita a submissão de um <form>.

Bubbles Sim (apesar de especificado como um evento simples que não borbulha)
Cancelável Sim
Interface SubmitEvent
Propriedade para manipular o evento GlobalEventHandlers.onsubmit

É importante notar que o evento submit é disparado no próprio elemento <form>, e não em um <button> ou <input type="submit"> dentro dele. No entanto, o evento SubmitEvent enviado para indicar a ação possui uma propriedade submitter, que é o botão que realizou o pedido de submit.

O evento submit é disparado quando a pessoa usuária clica em um botão (<button> ou <input type="submit">) ou pressiona Enter enquanto está editando um campo (p. ex. <input type="text">) em um formulário. O evento não é enviado ao formulário quando se chama o método form.submit() diretamente.

Nota: Tentar submeter um formulário que não passa na validação dispara um evento invalid. Nesse caso, a validação previne a submissão do formulário, impedindo que seja disparado o evento submit.

Exemplos

Este exemplo usa EventTarget.addEventListener() para escutar por um submit do formulário, e escreve o Event.timeStamp do momento em que ele é disparado. Após isso, previne a ação padrão de submeter o formulário utilizando Event.preventDefault().

HTML

html
<form id="form">
  <label>Campo de teste: <input type="text" /></label>
  <br /><br />
  <button type="submit">Submeter formulário</button>
</form>
<p id="log"></p>

JavaScript

js
function logSubmit(event) {
  log.textContent = `Formulário Submetido! Time stamp: ${event.timeStamp}`;
  event.preventDefault();
}

const form = document.getElementById("form");
const log = document.getElementById("log");
form.addEventListener("submit", logSubmit);

Resultado

Especificações

Specification
HTML
# event-submit
HTML
# handler-onsubmit

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
submit event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Ver também