10 octobre 2020

Formulaires: l'événement et la méthode "submit"

L’événement submit se déclenche lorsque le formulaire est soumis, il est généralement utilisé pour valider le formulaire avant de l’envoyer au serveur ou pour abandonner la soumission et la traiter en JavaScript.

La méthode form.submit() permet de lancer l’envoi de formulaire depuis JavaScript. Nous pouvons l’utiliser pour créer et envoyer dynamiquement nos propres formulaires au serveur.

Voyons-les plus en détail.

Évènement: submit

Le premier – cliquer sur <input type="submit"> ou <input type="image">.
La seconde – appuyez sur Enter dans un champ de saisie.

Les deux actions mènent à l’événement submit sur le formulaire. Le gestionnaire peut vérifier les données, et s’il y a des erreurs, les afficher et appeler event.preventDefault(), alors le formulaire ne sera pas envoyé au serveur.

Dans le formulaire ci-dessous:

Allez dans le champ de texte et appuyez sur Enter.
Cliquez sur <input type ="submit">.

Les deux actions affichent alert et le formulaire n’est envoyé nulle part en raison de return false:

          <form onsubmit="alert('submit!');return false">
  First: Enter in the input field <input type="text" value="text"><br>
  Second: Click "submit": <input type="submit" value="Submit">
</form>

Lorsqu’un formulaire est envoyé en utilisant Enter sur un champ de saisie, un événement click se déclenche sur <input type="submit">.

C’est plutôt drôle, car il n’y a pas eu de clic du tout.

Voici la démo:

          <form onsubmit="return false">
 <input type="text" size="30" value="Focus here and press enter">
 <input type="submit" value="Submit" onclick="alert('click')">
</form>

Méthode: submit

Pour soumettre manuellement un formulaire au serveur, nous pouvons appeler form.submit().

Ensuite, l’événement submit n’est pas généré. On suppose que si le programmeur appelle form.submit(), alors le script a déjà effectué tous les traitements associés.

Parfois, cela est utilisé pour créer et envoyer manuellement un formulaire, comme ceci:

let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';

form.innerHTML = '<input name="q" value="test">';

// le formulaire doit être dans le document pour le soumettre
document.body.append(form);

form.submit();

Exercices

Formulaire modal

Créez une fonction showPrompt(html, callback) qui montre un formulaire avec le message html, un champ de saisie et des boutons OK/CANCEL.

Un utilisateur doit taper quelque chose dans un champ de texte et appuyer sur Enter ou sur le bouton OK, puis callback(value) est appelé avec la valeur saisie.
Sinon, si l’utilisateur appuie sur Esc ou CANCEL, alors callback(null) est appelé.

Dans les deux cas, cela met fin au processus de saisie et supprime le formulaire.

Conditions:

Le formulaire doit être au centre de la fenêtre.
Le formulaire est modal. En d’autres termes, aucune interaction avec le reste de la page n’est possible tant que l’utilisateur ne la ferme pas.
Lorsque le formulaire est affiché, le focus doit être à l’intérieur de <input> pour l’utilisateur.
Les touches Tab/Shift+Tab devraient déplacer le focus entre les champs du formulaire, ne pas lui permettre de partir pour d’autres éléments de la page.

Exemple d’utilisation:

          showPrompt("Enter something<br>...smart :)", function(value) {
  alert(value);
});
        

Une démo dans l’iframe:

P.S. Le document source contient HTML/CSS pour le formulaire avec un positionnement fixe, mais c’est à vous de le rendre modal.

Open a sandbox for the task.

Une fenêtre modale peut être implémentée en utilisant un <div id="cover-div"> semi-transparent qui couvre toute la fenêtre, comme ceci:

          #cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
}
        

Parce que la <div> couvre tout, il obtient tous les clics, pas la page en dessous.

Nous pouvons également empêcher le défilement de la page en définissant body.style.overflowY ='hidden'.

Le formulaire ne doit pas être dans<div>, mais à côté, car nous ne voulons pas qu’il ait opacity.

Ouvrez la solution dans une sandbox.

Carte du tutoriel

Commentaires

lire ceci avant de commenter…