Evénement input sur element select ne fonctionne pas

**moimp** · 03/08/2019, 11h36

Bonjour à tous,

Dans la doc MDN, je lis "Les évènements déclenchés par <select> : input, change"

Si je modifie la valeur d'un élément input, l'événement est déclenché mais ce n'est pas le cas si je change l'option d'un élément select, ni si j'y saisi les premiers caractères. Ligne 4, la console retourne bien tous les éléments et en particulier, les options de l'élément select.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
	const cardForm	= document.querySelector(".cardForm")
		, cardFields= cardForm.querySelectorAll("input, select, textarea")
		;
	console.log(cardFields);
	for (let i=0, max=cardFields.length; i<max; i++)
	{
		cardFields[i].addEventListener('input', function(e)
		{
			alert(this.name);
		},false);
	}

Page html générée

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<!-- J'ai supprimé quelques balises pour ne pas alourdir -->
<form method="post" action="http://sirep.proginet.local/frontend/controllers/addressHandle.php" class="cardForm">
	<div>
		<label for="company">Client</label><input type="text" name="company" id="company" value="Nom" /><br/>
		<label for="address1">Adresse 1</label><input type="text" name="address1" id="address1" value="avenue de San Severo" /><br/>
		<label for="country">Pays</label><select name="countries" id="countries"><option></option><option value="AF">Afghanistan</option><option value="ZA">Afrique du Sud</option><option value="FR" selected="selected">France</option><option value="ZW">Zimbabwe</option></select><br/>
		<label for="zip">Code postal</label><input type="text" name="zip" id="zip" value="01234" /><br/>
		<label for="city">Ville</label><input type="text" name="city" id="city" value="Ma ville" /><br/>
	</div>
	<div>
		<label for="phone">Téléphone</label><input type="text" name="phone" id="phone" value="01 23 45 67 89" /><br/>
		<label for="note">Annotation</label><input type="text" name="note" id="note" value="" /><br/>
	</div>
</form>
 
 
 
 
	</body>
</html>

Invité · 03/08/2019, 12h20

Bonjour,

1- avec les codes fournis, ça fonctionne.

2- On peut aussi écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
cardFields.forEach( function(cardField){
  cardField.addEventListener('input', function(e){
    console.log(this.name, this.value);
  });
});

**moimp** · 03/08/2019, 14h11

Envoyé par jreaux62

Bonjour,
1- avec les codes fournis, ça fonctionne.

Il faut que je regarde pourquoi, ça ne fonctionne pas chez moi. En effet, lorsque je fais un copier/coller in extenso du fichier source et du code JS dans JSFiddle avec Chrome, tout fonctionne.
EDIT:

Si j'enregistre la source dans un fichier de mon application et que j'affiche ce fichier dans mon navigateur, le problème persiste.
Il semblerait que ce soit un problème du navigateur (IE11) parce que si je fais l'essai dans un autre navigateur (Chrome), le fonctionnement est correct.
JSFiddle ne fonctionne pas avec IE.

Envoyé par jreaux62

2- On peut aussi écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
cardFields.forEach( function(cardField){
  cardField.addEventListener('input', function(e){
    console.log(this.name, this.value);
  });
});

Non, ça ne fonctionne pas parce que cardFields n'est pas un tableau mais une liste de nœuds, je crois. Le navigateur (IE11 m'indique une erreur : L'objet ne gère pas la méthode "forEach")

Invité · 03/08/2019, 15h17

Envoyé par moimp

...cardFields n'est pas un tableau mais une liste de nœuds...

Sauf erreur, on a déjà eu cette discussion, non ?...

Il suffit d'utiliser Array.from() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

cardFields = Array.from( cardForm.querySelectorAll("input, select, textarea") )

Auquel cas .forEach() s'appliquera bien à un tableau (array).
Compatible depuis I.E. 9.

**moimp** · 03/08/2019, 16h40

C'est vrai, nous en avons déjà parlé, mais non, il n'est pas géré pour la méthode .from. Voir le tableau des compatibilités MDN ici. C'est pour ça que je ne l'utilise pas.

Invité · 03/08/2019, 16h47

Oups...

**Toufik83** · 03/08/2019, 22h22

Salut,

Il y'a une autre façon pour attacher l'événement "input" ou "change" tout en gardant la compatibilité avec IE

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
for (let i = 0, max = cardFields.length; i < max; i++) {
      cardFields[i].addEventListener(cardFields[i].nodeName.toLowerCase() == 'input' ? 'input' : 'change'
               , function(e) {//si c'est un input alors on attache l’événement input, sinon on attache  change
                     console.log("name :", this.name,', event :',e.type);
     },false);
}

comme on peut aussi parcourir le Nodelist "cardFields" avec deux manières :

méthode 1 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
Array.prototype.slice.call(cardFields).forEach(function(element){
    console.log('element.name :',element.name);
});

Méthode 2 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
[...cardFields].forEach(element =>{
    console.log('element.name :',element.name);
});

Donc on peut attacher les événements avec les deux méthodes ci-dessus :

Avec la méthode 1 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
Array.prototype.slice.call(cardFields).forEach(function(element) {
	  element.addEventListener(element.nodeName.toLowerCase() == "input" ? "input" : 'change', function(e) {
	    console.log("name :", this.name);
	  }, false);
});

Avec la méthode 2 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
[...cardFields].forEach(element => {
	  element.addEventListener(element.nodeName.toLowerCase() == "input" ? "input" : 'change', function(e) {
	    console.log("name :", this.name);
	  }, false);
});

**NoSmoking** · 06/08/2019, 17h55

Bonjour,
la syntaxe Destructuring assignment n'est pas prise en compte par IE, donc exit la méthode 2 [...cardFields].forEach(element =>{.

Nota :
la propriété nodeName comme tagName, d'un élément HTML renvoi une chaine en majuscule donc inutile de faire le test sur les minuscules

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

cardFields[i].nodeName == "INPUT" ? 'input' : 'change'

**Toufik83** · 06/08/2019, 18h34

Envoyé par NoSmoking

Bonjour,
la syntaxe Destructuring assignment n'est pas prise en compte par IE

Ben si, je viens de tester la méthode 1 sous IE 11 et cela fonctionne, par-contre la méthode 2 n'est pas compatible avec IE mais compatible avec EDGE.

**NoSmoking** · 06/08/2019, 18h49

par-contre la méthode 2 n'est pas compatible avec IE

Je parlais bien de la méthode 2.

Evénement input sur element select ne fonctionne pas

JavaScript

Discussions similaires

Partager

Partager