HTMLFormElement : évènement submit
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
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.
submitterLecture seule-
Un objet
HTMLElementqui 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 : <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
| Specification |
|---|
| HTML # event-submit |
| HTML # handler-onsubmit |