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.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/pt-br/web/api/htmlformelement/index.md)

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 Standard
# event-submit
HTML Standard
# handler-onsubmit

Compatibilidade com navegadores

BCD tables only load in the browser

Ver também