Récupérer et modifier la valeur des champs

Champs de saisie

Propriété value

Pour récupérer ou modifier la valeur entrée par le visiteur dans un champs de saisie texte (input, password,textarea, hidden , email) on utilise la propriété .value.

let texte = monElement.value;
monElement.value = "toto";

Liste déroulantes

Propriété value

Pour récupérer la valeur de l'option sélectionnée d'une liste, on utilise la propriété .value.

monElementSelect.value;

Selecteur CSS :checked

Le sélecteur :checked vous permet de récupérer l'option actuellement sélectionnée avec querySelector .

Exemple récupérer le contenu texte de l'option selected :

<select name="pays" id="pays">
   <option value="">-- Sélectionnez un pays --</option>
   <option value="FR">France</option>
   <option selected value="IT">Italie</option>
   <option value="CH">Suisse</option>
</select>

<script>
const liste = document.getElementById("pays");
const optionSelectionnee = liste.querySelector("option:checked");

console.log(optionSelectionnee.innerText); // Italie
</script>

Evénement change

L'événement change est souvent associé aux listes. Il se déclenche lorsque le visiteur sélectionne une autre option dans la liste.

monElementListe.addEventListener("change", function() {...});

Exemple

<select name="pays" id="pays">
   <option selected value="">-- Sélectionnez un pays --</option>
   <option value="FR">France</option>
   <option value="IT">Italie</option>
   <option value="CH">Suisse</option>
</select>


   Code du pays : <span class="code"></span>


<script>
// Récupère la liste déroulante #pays et le span .code
const listePays = document.getElementById("pays");
const codeSelectionne = document.querySelector("span.code");

// Sur changement de la valeur de la liste déroulante
listePays.addEventListener("change", function() {
   // Récupère la valeur de l'option sélectionnée
   let codePays = listePays.value;
   // Modifie le contenu texte du span .code
   codeSelectionne.innerText = codePays;
});
</script>

Cases à cocher

Propriété checked

La propriété checked vous permet de savoir si une case est cochée true ou non false

monElement.checked; // Retourne true ou false

Exemple

<form action="https://kode.ch/getpost/" method="post">
   <input type="checkbox" id="copie" name="copie">
   <label for="copie">Recevoir une copie</label>
   <button>Envoyer</button>
</form>

<script>
// 1er formulaire du document
const formulaire = document.querySelector("form");
// Case à cocher "copie"
const chkCopie = document.getElementById("copie");

// Evénement submit => Lors de l'envoi du formulaire
formulaire.addEventListener("submit", function(event) {
   // Si utilisateur n'a pas saisi de nom
   if (chkCopie.checked === true) {
      alert("Message envoyé AVEC copie !");
   } else {
      alert("Message envoyé SANS copie !");
   }
});
</script>

Groupe de cases à cocher

Sélecteur CSS :checked

Pour récupérer les cases cochées d'un groupe, la meilleure méthode est d'utiliser querySelector et la puissance des sélecteurs CSS, pour récupérer toutes les cases cochées :checked du groupe [name="nomGroupe"] .

let casesCochées = document.querySelectorAll(
      'input[name="groupeCases[]"]:checked'
   );

WARNING

La variable qui contient le résultat du querySelectorAll()n'est pas "dynamique", les nouvelles cases cochées ne s'y ajouteront pas automatiquement.

Il ne faut donc rappeler querySelectorAll() pour mettre à jour le contenu de la variable.

Exemple

<form action="https://kode.ch/getpost/" method="post">
   <input type="checkbox" name="couleurs[]" id="rouge" value="rouge">
   <label for="rouge">Rouge</label>

   <input type="checkbox" name="couleurs[]" id="vert" value="vert">
   <label for="vert">Vert</label>

   <input type="checkbox" name="couleurs[]" id="bleu" value="bleu">
   <label for="bleu">Bleu</label>

   <button>Envoyer</button>
</form>

<script>
// 1er formulaire du document
const formulaire = document.querySelector("form");

// Evénement submit => Lors de l'envoi du formulaire
formulaire.addEventListener("submit", function(event) {
   event.preventDefault();

   // Cases cochée dans le groupe couleurs[]
   const couleursCochées = document.querySelectorAll(
      'input[name="couleurs[]"]:checked'
   );

   //Récupère la valeur des éléments cochés
   for (let couleur of couleursCochées) {
      alert(couleur.value);
   }
});
</script>

Groupe de boutons radios

Pour récupérer la valeur du radio sélectionné dans un groupe, la meilleure méthode est d'utiliser querySelector et la puissance des sélecteurs CSS, pour récupérer le premier radio coché :checked du groupe [name="nomGroupe"] .

// Récupère la valeur du radio coché dans le groupe "couleur"
document.querySelector('[name="couleur"]:checked').value;

Exemple

<form action="https://kode.ch/getpost/" method="post">
   <input type="radio" name="genre" id="h" value="Homme">
   <label for="h">Homme</label>

   <input type="radio" name="genre" id="f" value="Femme">
   <label for="f">Femme</label>

   <button>Envoyer</button>
</form>

<script>
// 1er formulaire du document
const formulaire = document.querySelector("form");

// Evénement submit => Lors de l'envoi du formulaire
formulaire.addEventListener("submit", function(event) {
   // Désactive l'envoi du formulaire
   event.preventDefault();

   // Radio coché dans le groupe genre
   const genre = document.querySelector('[name="genre"]:checked');

   // Test si un genre est coché
   if (genre === null) {
      alert("Sélectionner un genre !");
      return;
   }

   alert(genre.value);
});
</script>