jQuery / Method / .submit() — Événements de soumission de formulaire

Traitez la soumission avec $(form).on("submit", handler). Pour la demander avec validation du navigateur, utilisez form.requestSubmit(). L’ancienne forme jQuery .submit(), le déclenchement d’événement et form.submit() natif suivent des chemins différents.

Lier un événement ou demander la soumission

La forme courte jQuery .submit() est dépréciée depuis 3.3. Avec fonction elle lie, sans argument elle déclenche. Les deux existent encore dans les versions complètes testées 3.7.1 et 4.0.0. Préférez des API explicites pour du nouveau code ; déprécié ne signifie pas automatiquement supprimé.

L’événement submit appartient au formulaire. Le traiter là couvre clic, Entrée et requête programmée. Une vérification uniquement dans le clic du bouton peut manquer d’autres chemins.

Exemple complet de comparaison

Enregistrez et ouvrez submit-demo.html en UTF-8. Internet charge jQuery complet 4.0.0, sans serveur ni compilation. preventDefault arrête toutes les soumissions et affiche seulement le résultat. Aucun envoi externe ni stockage. Windows Edge avec 4.0.0 et 3.7.1 a vérifié ces chemins et les données du bouton.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Inspect form submit events</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 720px; margin: 20px; }
    label { display: block; margin-top: 12px; }
    input, select, button { font: inherit; max-width: 100%; margin: 5px 0; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <form id="chooser">
    <label for="person">Name</label>
    <input id="person" name="person" required>
    <label for="fruit">Fruit</label>
    <select id="fruit" name="fruit" required>
      <option value="">Choose a fruit</option>
      <option value="apple">Apple</option><option value="banana">Banana</option>
    </select>
    <button id="inside" type="submit" name="intent" value="inside">Inspect inside</button>
  </form>
  <button id="outside" type="submit" form="chooser" name="intent" value="outside">Inspect outside</button>
  <button id="request" type="button">requestSubmit(inside)</button>
  <button id="trigger" type="button">jQuery trigger submit</button>
  <button id="restore" type="button">Reset</button>
  <label><input id="automatic" type="checkbox">Request submission when fruit changes</label>
  <pre id="result" aria-live="polite">events=0
No submission inspected.</pre>
  <script>
    jQuery(function ($) {
      const form = document.querySelector("#chooser");
      let events = 0;
      $(form).on("submit", function (event) {
        event.preventDefault(); events++;
        if (!form.reportValidity()) {
          $("#result").text("events=" + events + "\nInvalid data; not inspected."); return;
        }
        const submitter = event.originalEvent ? event.originalEvent.submitter : null;
        const data = submitter ? new FormData(form, submitter) : new FormData(form);
        $("#result").text("events=" + events + "\nsubmitter=" + (submitter ? submitter.id : "(none)") +
          "\nvalues=" + JSON.stringify(Object.fromEntries(data)));
      });
      $("#request").on("click", function () { form.requestSubmit(document.querySelector("#inside")); });
      $("#trigger").on("click", function () { $(form).trigger("submit"); });
      $("#fruit").on("change", function () {
        if (document.querySelector("#automatic").checked) form.requestSubmit();
      });
      $("#restore").on("click", function () {
        form.reset(); document.querySelector("#automatic").checked = false; events = 0;
        $("#result").text("events=0\nNo submission inspected.");
      });
    });
  </script>
</body>
</html>

État initial : events compte les entrées dans le gestionnaire, pas les sauvegardes serveur.

events=0
No submission inspected.

1. Champs vides, inside, outside et requestSubmit(inside) sont bloqués par required avant le gestionnaire : events=0.
2. jQuery trigger submit atteint events=1, mais reportValidity indique Invalid data; not inspected.
3. Reset, puis JB et Apple, et Inspect inside : events=1, submitter=inside et les valeurs apparaissent.
4. Inspect outside donne submitter=outside et intent=outside. form="chooser" associe ce bouton externe.
5. requestSubmit(inside) précise ce bouton. Entrée dans Name utilise aussi ici le premier bouton inside.
6. Le déclenchement jQuery valide donne submitter=(none), sans intent de bouton.
7. Activez la demande automatique puis Banana : requestSubmit() sans bouton donne submitter=(none).
8. Reset rétablit valeurs, case automatique et compteur.

event.originalEvent.submitter lit le bouton du SubmitEvent natif. Un événement synthétique jQuery peut ne pas avoir originalEvent. FormData(form, submitter) inclut son name/value. Object.fromEntries ne garde que la dernière valeur pour les noms répétés : cette présentation n’est pas un modèle pour collecter des valeurs multiples.

Commandes externes et arrêt

Un vrai button type="submit" avec attribut form fournit le comportement clavier et formulaire même à l’extérieur. Cette position ne contourne pas required par elle-même ; l’API choisie compte.

requestSubmit() valide puis émet submit si les données sont valides. Un élément précisé doit être un bouton de soumission associé à ce formulaire. L’exemple couvre les deux variantes.

Soumettre immédiatement à chaque changement de select peut surprendre pendant la sélection au clavier. Ici il faut activer la fonction, et la navigation reste arrêtée. Choisissez entre filtre immédiat et confirmation. Un setter .val() seul n’émet pas change.

preventDefault arrête l’envoi normal. Pour attendre une opération asynchrone, empêchez l’action dès le gestionnaire ; après await, on ne défait pas une soumission déjà lancée. L’exemple n’a pas de transport asynchrone. Une vraie réalisation exige état en cours, doublons, récupération et validation serveur.

Ancienne forme et méthode native

Exécutez cette vérification après initialisation. Le formulaire détaché empêche l’action par défaut, sans requête serveur.

const $probe = $("<form>");
let calls = 0;
$probe.submit(function (event) {
  event.preventDefault();
  calls++;
});
$probe.submit();
console.log("legacy calls=" + calls);

Résultat Console ; dans l’ancien code, distinguez fonction et appel sans argument.

legacy calls=1

.trigger("submit") exécute les gestionnaires et peut appeler la méthode native si l’action n’est pas empêchée. Il ne simule pas entièrement clic et contraintes. reportValidity protège aussi le cas synthétique de l’exemple.

HTMLFormElement.submit() contourne contraintes et gestionnaires. Un test séparé a soumis un required vide dans un iframe avec interception locale de la requête : données vides et zéro événement. Il ne vérifiait pas le stockage d’un vrai serveur récepteur.

Pour form.submit is not a function, cherchez un contrôle dont name ou id vaut submit et masque la méthode. Évitez aussi reset. Distinguez collection jQuery et formulaire DOM : requestSubmit appartient au DOM, obtenu par exemple avec [0].

Une soumission réelle exige action, method et réception adaptés ; modifiez alors l’arrêt systématique et l’affichage de cette pratique. Valid ne signifie pas enregistré et required ne remplace pas le contrôle serveur.