HTMLFormElement : évènement submit

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété gestionnaire d'évènements.

addEventListener("submit", (event) => { })

onsubmit = (event) => { }

Type d'évènement

Un objet SubmitEvent. Hérite de Event.

Description

L'évènement submit se déclenche sur l'élément <form> lui-même, et non sur un éventuel <button> ou <input type="submit"> à l'intérieur de celui-ci. Cependant, le SubmitEvent qui est envoyé pour indiquer que l'action d'envoi du formulaire a été déclenchée inclut une propriété submitter, qui est le bouton qui a été utilisé pour déclencher la demande d'envoi.

L'évènement submit se déclenche lorsque :

• l'utilisateur·ice clique sur un bouton d'envoi,
• l'utilisateur·ice appuie sur Entrée lors de la saisie dans un champ (par exemple, <input type="text">) dans un formulaire,
• un script appelle la méthode form.requestSubmit()

En revanche, l'évènement n'est pas envoyé au formulaire lorsqu'un script appelle directement la méthode form.submit().

Essayer d'envoyer un formulaire qui ne passe pas la validation déclenche un évènement invalid. Dans ce cas, la validation empêche l'envoi du formulaire, et donc il n'y a pas d'évènement submit.

Envoi implicite

La spécification HTML ^(angl.) ne définit pas formellement quels gestes de l'utilisateur·ice peuvent déclencher un envoi implicite, car cela dépend des conventions du système d'exploitation et de l'appareil. Par exemple, appuyer sur Entrée tout en étant sélectionné sur un champ de texte est un geste courant. Cependant, la réaction du navigateur à un tel geste est standardisée :

• Si le formulaire a un bouton d'envoi par défaut non désactivé, le navigateur déclenche un évènement click sur ce bouton. Le bouton par défaut est le premier bouton d'envoi dans l'ordre de l'arbre dont le propriétaire du formulaire est ce formulaire. Cela déclenche ensuite le processus d'envoi du formulaire (comme si le bouton est pressé par l'utilisateur·ice), sauf si l'évènement est annulé.
• Si le formulaire n'a pas de bouton d'envoi, il est envoyé implicitement uniquement lorsqu'il contient au plus un élément HTML <input> de type text, search, tel, url, email, password, date, month, week, time, datetime-local ou number. Les éléments HTML <textarea> et <select> ne bloquent pas l'envoi implicite.
• Sinon, si le formulaire a un bouton d'envoi par défaut désactivé, ou aucun bouton d'envoi et plus d'un champ de saisie bloquant l'envoi implicite, le geste ne déclenche jamais d'envoi implicite.

Exemples

Cet exemple utilise EventTarget.addEventListener() pour écouter l'envoi d'un formulaire, enregistre le Event.timeStamp actuel à chaque occurrence, puis empêche l'action par défaut d'envoi du formulaire.

HTML

<form id="form">
  <label>Champ de test&nbsp;: <input type="text" /></label>
  <br /><br />
  <button type="submit">Envoyer le formulaire</button>
</form>
<p id="log"></p>

JavaScript

const form = document.getElementById("form");
const log = document.getElementById("log");

function logSubmit(event) {
  log.textContent = `Formulaire envoyé ! Horodatage : ${event.timeStamp}`;
  event.preventDefault();
}

form.addEventListener("submit", logSubmit);

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément HTML <form>
• Évènement lié : invalid