HTMLFormElement: submit event
O evento submit
é disparado quando é feita a submissão de um <form>
(en-US).
Bubbles | Sim (apesar de especificado como um evento simples que não borbulha) |
---|---|
Cancelável | Sim |
Interface | SubmitEvent (en-US) |
Propriedade para manipular o evento | GlobalEventHandlers.onsubmit (en-US) |
É importante notar que o evento submit
é disparado no próprio elemento <form>
, e não em um <button>
ou <input type="submit"> (en-US) dentro dele. No entanto, o evento SubmitEvent
(en-US) enviado para indicar a ação possui uma propriedade submitter
(en-US), 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"> (en-US)) ou pressiona Enter enquanto está editando um campo (p. ex. <input type="text"> (en-US)) em um formulário. O evento não é enviado ao formulário quando se chama o método form.submit()
(en-US) diretamente.
Nota: Tentar submeter um formulário que não passa na validação dispara um evento invalid
(en-US). 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
(en-US) 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
- Elemento HTML:
<form>
(en-US) - Evento relacionado:
invalid
(en-US)