Evénement input sur element select ne fonctionne pas

Version imprimable

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:

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:

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>

Bonjour,

1- avec les codes fournis, ça fonctionne.

2- On peut aussi écrire :
Code:

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

03/08/2019, 14h11
moimp
Citation:

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.
Citation:
Envoyé par jreaux62

2- On peut aussi écrire :

Code:

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")
03/08/2019, 15h17
Invité

Citation:

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 ?... :weird:

Il suffit d'utiliser Array.from() :

Code:

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

Auquel cas .forEach() s'appliquera bien à un tableau (array).
Compatible depuis I.E. 9.
03/08/2019, 16h40
moimp

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.
03/08/2019, 16h47
Invité

Oups...

Salut,

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

Code:

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 :

:arrow: méthode 1 :

Code:

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

:arrow: Méthode 2 :

Code:

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:

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:

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);
});

06/08/2019, 17h55
NoSmoking

Remarques

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:

cardFields[i].nodeName == "INPUT" ? 'input' : 'change'
06/08/2019, 18h34
Toufik83

Citation:

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.
06/08/2019, 18h49
NoSmoking

Citation:

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

Je parlais bien de la méthode 2.