DEVENIR-WEBMASTER.COM Log In
 26
open

Comment travailler avec les formulaires en Javascript

# Introduction open

Des connaissances HTML sur les formulaires et les champs de formulaires sont nécessaires. Vous avez deux tutoriels dans la partie HTML-CSS de ce site ici et ici. De même si vous avez fait les tutoriels JAVASCRIPT sur le DOM cette partie devrait vous paraître assez facile.

On va commencer par regarder comment manipuler les champs de formulaire on passera ensuite aux formulaires.

# Le champ de formulaire input de type text open

Comment récupérer la valeur d'un input de type text en Javascript

J'accède ici à l'élément input au moyen de la méthode querySelector puis je descends sur la valeur du texte qui est contenu dans l'input au moyen de la propriété value.

Tester le code

Comment modifier le contenu d'un input de type text en Javascript

Pour modifier le contenu de l'input il suffit d'affecter une chaîne de caractères à la propriété value. On peut aussi avec un opérateur += ajouter du texte au contenu existant.

Tester le code

Comment positionner en readOnly un input de type text en Javascript

Un champ en readOnly est en lecture seule. Si ce champ fait partie d'un formulaire il sera transmis au serveur avec les autres champs. Je le précise ici car ce n'est pas le cas d'un champ placé en disabled. Je reviendrai sur ce cas à la fin de ce tuto. Ici il suffit de placer la propriété readOnly à true.

Tester le code

# Le champ de formulaire textarea open

Le champ de type textarea est un champ très élaboré. On peut faire un éditeur avec un champ de ce type. On va voir ici le mini minimum.

  1. Mon premier objectif est de lire le contenu du champ. Je le fais en passant de nouveau par la propriété value.
  2. Ensuite j'ajoute une nouvelle ligne qui est la troisième. Notez la présence en fin de ligne du caractère non inscriptible \n qui signifie new line pour nouvelle ligne.
  3. Ensuite j'ajoute à nouveau \n pour créer une ligne vide.
  4. Enfin j'ajoute une dernière ligne en utilisant devant la ligne un nouveau caractère non inscriptible. Cette fois il s'agit du \t qui signifie Tab pour tabulation.
Tester le code

# Le champ de formulaire select open

Comment récupérer la valeur courante du select en Javascript

C'est à dire la valeur actuelle que l'on peut lire à l'écran sur un select. J'utilise à nouveau la propriété value.

Tester le code

Comment récupérer la valeur du contenu textuel d'une option de select en Javascript

Je sélectionne d'abord le select pour accéder au tableau des options. C'est un tableau qui contient des objets Javascript qui correspondent aux éléments HTML option. J'utilise donc textContent pour récupérer le contenu qui est entre les balises d'un de ces éléments HTML <option>contenu</option>.

Tester le code

Comment modifier la valeur du contenu textuel d'une option de select en Javascript

C'est le même principe qui ci-dessus pour accéder au tableau puis au contenu sauf qu'ici je fais une affectation pour modifier la valeur.

Tester le code

Comment modifier la position du select en Javacript

Il faut utiliser la propriété selected et lui affecter l'entier qui correspond à la position sur laquelle vous voulez positionner le select.

Tester le code

Comment ajouter une option à la fin du select en Javascript

Ici je vais utiliser la propriété innerHTML pour ajouter une option supplémentaire au select. Je pourrais très bien remplacer tout le contenu du select.

Tester le code

Comment travailler avec l'événement change en Javascript

Dans l'exemple ci dessous j'utilise la méthode addEventListener pour mettre en place un gestionnaire d'événement. C'est l'événement change qui est intercepté par ce gestionnaire à chaque changement de la valeur sélectionnée sur le select.

Tester le code

# Le checkbox open

Comment récupérer la valeur d'un checkbox en Javascript

Pour savoir si un checkbox est coché ou pas il faut tester la propriété checked. La propriété est une valeur booléenne qui est true si le checkbox est coché.

Tester le code

Comment modifier la valeur d'un checkbox en Javascript

Il faut affecter la propriété checked pour modifier l'état du checkbox. Ci dessous en HTML je coche le premier checkbox et pas le deuxième. Ensuite je modifie ça en Javascript en décochant le premier checkbox puis en cochant le deuxième.

Tester le code

# Le radio open

Comment récupérer le bouton radio qui est coché en Javascript

Pour savoir quel est le bouton radio qui est coché dans une liste des boutons radio il faut parcourir la liste et les tester jusqu'à trouver le gagnant. Dans le script ci-dessous je sors de la boucle avec un break dès que j'ai trouvé le bouton radio qui a sa propriété checked à la valeur true.

Tester le code

Comment cocher un bouton radio en Javascript

Pour cocher un radio bouton dans une liste de radio bouton il suffit de cocher le radio bouton en question sans plus. Si un autre radio bouton est coché il sera automatiquement décoché. En effet par conception, un seul radio bouton peut être coché dans une liste de radio bouton.

Tester le code

# Comment utiliser disabled avec les champs de formulaires open

Ci dessous je place un certain nombre de champs à l'état disabled. Dans ce cas :

  1. l'opérateur ne peut pas interagir avec eux.
  2. ils ne seront pas transmis au serveur au moment de la soumission du formulaire.
Tester le code

# Comment traiter un formulaire en Javascript open

Dans l'exemple ci-dessous j'encapsule maintenant tous mes champs à l'intérieur d'un élément form. L'attribut action contient le nom du fichier qui recevra les informations sur le serveur. L'attribut method spécifie la manière avec laquelle les informations seront envoyées au serveur. Si vous faites un test sur une machine en local vous n'avez pas besoin de préciser ces attributs.

Le dernier champ de type submit créer le bouton Envoyer.

Un clic sur ce bouton déclenche :

  1. En premier un événement submit.
  2. En second l'envoi du formulaire.

Si je ne fais rien en Javascript. Le formulaire est envoyé au serveur. Pour la démo vidéo j'ai placé côté serveur un fichier php qui affiche les données reçues.

Ce que je vais faire c'est :

  1. Intercepter l'événement submit au moyen d'un gestionnaire d'événement. Je vais le mettre en place avec la méthode addEventListener().
  2. Visualiser les données. Je vais le faire de plusieurs manières de façon à couvrir toutes les possibilités que vous pourriez rencontrer en lisant du code. Je détaillerai plus loin.
  3. Bloquer (ou pas) l'envoi du formulaire au moyen de la méthode preventDefault(). Attention il faut appeler la méthode sur l'objet événement.
Tester le code

Au niveau de la visulalisation des données je fais deux séries de console.log().