L'évènement submit de l'interface HTMLFormElement se déclenche lorsqu'un élément HTML <form> est soumis.

Notez que l'évènement submit se déclenche sur l'élément <form> lui‑même, et non sur un <button> ni sur un <input type="submit"> qu'il contient. Toutefois, le SubmitEvent envoyé pour indiquer que l'action de soumission a été déclenchée comprend une propriété submitter, qui est le bouton invoqué pour déclencher la requête de soumission.

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

• l'utilisateur·ice clique sur un bouton de soumission,
• 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().

Note : Tenter de soumettre un formulaire qui ne passe pas la validation déclenche un évènement invalid. Dans ce cas, la validation empêche la soumission du formulaire, et il n'y a donc pas d'é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.

Propriétés de l'évènement

En plus des propriétés listées ci‑dessous, cette interface hérite des propriétés de son interface parente, Event.

submitter Lecture seule

Un objet HTMLElement qui identifie le bouton ou l'autre élément utilisé pour déclencher la soumission du formulaire.

Exemples

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

HTML

<form id="form">
  <label>Champ de test&nbsp;: <input type="text" /></label>
  <br /><br />
  <button type="submit">Soumettre 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 soumis ! 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