Plusieurs formulaires identiques différentiés par une clef sur un même document

Version imprimable

Bonjour,

Sur un même document, j'ai plusieurs formulaires identiques différentiés par une clef. Je n'arrive pas à lire la valeur d'un champ de l'un des formulaires.
Code source:

Code:

1
2
3
4
5
6
7
8
9
<form method="post" name="tabForm" action="http://sirep.proginet.local/frontend/mainFormHandler.php" data-tab="employee" data-key="0">
	<input type="text" id="id0" name="0[id]" value="110"> <!-- Remplacer le type par 'hidden' -->
	<label for="firstname0">Prénom</label><input type="text" id="firstname0" name="0[firstname]" value="Jean-Michel"><br>
</form>
 
<form method="post" name="tabForm" action="http://sirep.proginet.local/frontend/mainFormHandler.php" data-tab="employee" data-key="1">
	<input type="text" id="id1" name="1[id]" value="297"> <!-- Remplacer le type par 'hidden' -->
	<label for="firstname1">Prénom</label><input type="text" id="firstname1" name="1[firstname]" value="Marie-Jeanne"><br>
</form>

Code:

1
2
3
4
5
6
7
8
9
10
11
const tabForms	= document.querySelectorAll("[name='tabForm']");
 
if(tabForms.length){
	tabForms.forEach(function(curForm, index){ // voir utilité de index
		curForm.addEventListener('change', function(e) {
		if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'SELECT' || e.target.nodeName === 'TEXTAREA') {
			let idId = 'id'+this.dataset.key;
			}
		}, false );
	});
}

Je n'arrive pas à lire la valeur du champ défini par idId à la ligne 7.

31/12/2020, 08h11
-Nikopol-

le data-key est un attribut de ton form, là tu le cherches dans e.target qui ici est un enfant du form. En prenant let idId = 'id' + curForm.dataset.key; tu devrais obtenir ce que tu veux.
31/12/2020, 08h56
moimp

Si je fais console.log(this); et console.log(curForm); j'obtiens exactement le même résultat, c'est à dire le même élément form.
Dans les deux cas idId vaut id0 (ou id1 selon le formulaire cliqué) et je n'arrive pas à accéder à la valeur de cet élément idId.

Salut

Code:

1
2
let idId = 'id' + curForm.dataset.key;
console.log("document.getElementById(idId).value = " + document.getElementById(idId).value)

31/12/2020, 09h35
NoSmoking

Bonjour,
si ta structure est toujours la même, à savoir ton <input> en premier enfant, alors il suffit de faire un :

Code:

console.log(this.firstElementChild.value);
31/12/2020, 10h03
moimp

Merci à vous deux :D
@NoSmoking:
A priori, il n'y a pas de raison que la structure change mais par précaution pour préserver l'avenir dans la suite du développement, je préfère la solution de @ProgElecT.