Discussion :

[moimp]

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 html :

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

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 JS :

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

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.

[-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.

[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.

[ProgElecT]

Salut

Code :

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

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

?

[NoSmoking]

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

Code :

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

console.log(this.firstElementChild.value);

[moimp]

Merci à vous deux
@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.