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