Foreach input id et name initialisation

Résolu/Fermé
Mikamadgik Messages postés 87 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 26 avril 2021 - 26 avril 2021 à 17:45
Mikamadgik Messages postés 87 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 26 avril 2021 - 26 avril 2021 à 22:34
Bonjour,

Je fais appel à vous, car là, je bloque sur quelque chose qui est sûrement très simple, mais je n'arrive pas à trouver des solutions sur les forums.

J'ai un tableau, avec des catégories : Voiture, camion, moto, etc. En dessous de chaque catégorie, j'ai des lignes, et sur chaque ligne plusieurs input text. Quand je clic sur le bouton "+" à côté du titre de la catégorie, je veux ajouter une ligne avec les mêmes inputs, mais vide. Jusque là cela fonctionne.

Je veux créer un id et un name différent pour chaque input, afin de les traiter ensuite en php.

Lors du premier clic, cela fonctionne. Si je clic sur un bouton "+" d'une autre catégorie cela fonctionne aussi. Parcontre si je clic sur un bouton où j'ai déjà cliqué, il n'incréments plus l'id et le name. Il copie bien la ligne, mais il garde le même id et name que celui précédemment créé. Il ne repasse tout simplement pas par : [].forEach.call(clone.querySelectorAll('input'), function(input) comme si pour lui, il avait ça en mémoire et que du coup cela lui semble inutile de refaire. (J'ai vu ça en mettant une alert(); dans cette fonction)



L'initialisation d'une variable en début

<script language="JavaScript">
var variablenouveau = 0;
</script>



La ligne "catégorie" avec le bouton pour ajouter une ligne

<tr>
			<td colspan="2">
				<table>
					<tr>
						<td><a class="firstcellulepad "><button type="button" onclick="fonctionaddligne(<?php echo ($valeurligne); ?>)">+</button></a></td>
						<td><?php echo htmlspecialchars($categoriesup); ?></td>
						<td></td>
				 </tr>



La ligne avec des inputs qui est copié

<tr id="linetr<?php echo $valeurligne; ?>" >
		<td><input name="atitre<?php echo $id3;?>" type="text2" placeholder="Ajouter une description" id="5<?php echo $valeurligne;?>" autocomplete="off" /></td>
		<td><input name="apour<?php echo $id3;?>" type="text2" id="1<?php echo $valeurligne;?>" autocomplete="off" /></td>
		<td><input name="aqti<?php echo $id3;?>" type="text2" placeholder="0"  autocomplete="off" id="2<?php echo $valeurligne;?>" /></td>
		<td><input name="aqp<?php echo $id3;?>" type="text2" placeholder="0" autocomplete="off"  id="3<?php echo $valeurligne;?>" /></td>
		<td><input name="autrequanretour<?php echo $id3;?>" type="text2" placeholder="0" autocomplete="off" id="4<?php echo $valeurligne;?>"  /></td>
	</tr>




Le code javascript qui me pose problème


<script language="JavaScript">
					function fonctionaddligne(event) {

						var iddubutton = event;

						variablenouveau++;


					var rowselect = document.getElementById("linetr"+iddubutton); // On selectionne la ligne à copier
					var clone = rowselect.cloneNode(true); // On clone cette ligne

					// On vide la ligne cloné
					[].forEach.call(clone.querySelectorAll('input'), function(input) {
						input.value = '';
						var idinput = input.name;

						if (idinput.indexOf('atitre') > -1)
						{
						  input.id = 'idtitre'+variablenouveau;
							input.name = 'nametitre'+variablenouveau;
						}
						else {}

						if (idinput.indexOf('apour') > -1)
						{
							input.id = 'idpour'+variablenouveau;
						 input.name = 'namepour'+variablenouveau;
						}
						else {}

						if (idinput.indexOf('aqti') > -1)
						{
							input.id = 'idqti'+variablenouveau;
						 input.name = 'nameqti'+variablenouveau;
						}
						else {}

						if (idinput.indexOf('aqp') > -1)
						{
							input.id = 'idaqp'+variablenouveau;
						 input.name = 'nameaqp'+variablenouveau;
						}
						else {}

						if (idinput.indexOf('autrequanretour') > -1)
						{
							input.id = 'idretour'+variablenouveau;
						 input.name = 'nameretour'+variablenouveau;
						}
						else {}


						if (idinput.indexOf('aids') > -1)
						{
							input.value = 'valueannuler'+variablenouveau;
						}
						else {}




					});

					var para1 = document.getElementById("linetr"+iddubutton); // On selectionne la ligne avant laquel il faut insérer

					 rowselect.parentNode.insertBefore(clone, para1);  // Et on insert la ligne cloné


				}

			</script>



Merci beaucoup pour vos idées qui pourront me faire avancé (Sachant que j'ai un niveau faible en javascript)

Bonne journée à vous tous

1 réponse

Mikamadgik Messages postés 87 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 26 avril 2021 1
26 avril 2021 à 22:34
Réponse à ma question,
j'ai remplacé dans mon code javascript :

var input_list = clone.querySelectorAll('input'); // returns NodeList
          var input_array = [...input_list]; // converts NodeList to Array
           input_array.forEach(input => {


Et j'ai surtout vérifié, que les name des nouveaux inputs n'étaient pas identique, donc il ne modifié par as les valeurs. Donc le problème ne venait pas de la boucle.
0