par

Je cherche à récupérer avec JavaScript, la valeur de plusieurs input texte, ils disposent tous de la même class :

<input type="text" class="exemple" name="champ 1" value="un">
<input type="text" class="exemple" name="champ 2" value="deux"> 
<input type="text" class="exemple" name="champ 3" value="trois"> 

Comment puis-je parcourir plusieurs éléments, avec la même class, en JavaScript ?

1 Réponse

+1 validé
par

Pour parcourir tous les éléments avec la même class, en JavaScript, vous pouvez procéder comme suit :

  • Utiliser la méthode querySelectorAll() pour récupérer tous les éléments.
  • Créer un tableau Array avec chaque élément.
  • Parcourir le tableau avec la méthode forEach().

Voici un exemple pour récupérer et afficher les valeurs et les noms de chacun des input dont la class est identique :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment parcourir tous les éléments avec la même class en JavaScript ?</title>  
</head>
<body> 
<input type="text" class="exemple" name="champ 1" value="un">
<input type="text" class="exemple" name="champ 2" value="deux"> 
<input type="text" class="exemple" name="champ 3" value="trois"> 
<input type="button" value="Parcourir" onclick="parcourir();">
<script> 
function parcourir()
{
var valeur = "";
const elements = document.querySelectorAll(".exemple");
Array.from(elements).forEach((element, index) => 
{
valeur += "Valeur " + element.name + ": " + element.value + "\r";
});
alert(valeur);
}
</script> 
</body> 
</html>

Lecture Recommandée

Edward Snowden - Mémoires vives

"Je m'appelle Edward Joseph Snowden. Avant, je travaillais pour le gouvernement mais aujourd'hui je suis au service de tous. Il m'a fallu près de trente ans pour saisir la différence et quand j'ai compris, ça m'a valu quelques ennuis au bureau."

L'homme qui a tout risqué pour dénoncer la surveillance globale, ou l'extraordinaire histoire d'un garçon brillant qui a grandi "en ligne", d'un homme devenu espion, puis lanceur d'alerte, et, en exil, la consciencce de l'internet.

Mémoires vives est un témoignage exceptionnel, également disponible en numérique.

Sujets Connexes

Offre Sponsorisée

Ailleurs sur le Web

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...