J'ai quelques champs de saisie avec l'ID suivant :

<input type="text" name="numberC[]" id="numberC[]">
<input type="text" name="numberC[]" id="numberC[]">
<input type="text" name="numberC[]" id="numberC[]">

Je récupère les données au format JSON via mon appel ajax et push() certaines valeurs dans mon tableau.

Comment puis-je créer une boucle qui parcourra le tableau, puis insère chaque valeur dans l'un des champs de saisie ci-dessus ?

Donc disons que j'ai le tableau suivant :

var testArray = ['hi', 'bye', 'stackoverflow'];

Et j'ai les 3 champs de saisie suivants :

<input type="text" name="numberC[]" id="numberC[]">
<input type="text" name="numberC[]" id="numberC[]">
<input type="text" name="numberC[]" id="numberC[]">

Chaque fois que je le parcoure, j'obtiens malheureusement la valeur la plus élevée dans tous mes champs de saisie.

J'essaie de parcourir mon tableau en JavaScript et d'insérer chaque valeur dans chaque champ de saisie. donc testArray[0] devrait aller dans le premier champ de saisie, testArray[1] dans le deuxième champ de saisie et testArray[2] dans le troisième.

Sources que j'ai utilisées : Rechercher l'élément DOM par ID lorsque l'ID contient crochets ?

1
Danny 15 mars 2019 à 15:02

2 réponses

Meilleure réponse

Le id dans dom est toujours unique. À la place, utilisez document.querySelectorAll pour obtenir tous les éléments du même nom, puis parcourez-les et utilisez index pour vérifier si un élément existe dans l'index de testArray. Si c'est le cas, définissez la valeur de l'entrée

var testArray = ['hi', 'bye', 'stackoverflow'];
document.querySelectorAll('[name="numberC[]"]').forEach(function(item, index) {
  if (testArray[index]) {
    item.value = testArray[index]
  }

})
<input type="text" name="numberC[]" id="numberC[1]">
<input type="text" name="numberC[]" id="numberC[2]">
<input type="text" name="numberC[]" id="numberC[3]">
1
brk 15 mars 2019 à 13:45

Si vous modifiez votre code HTML pour avoir des identifiants différents

<input type="text" id="numberC[1]"/>
<input type="text" id="numberC[2]"/>
<input type="text" id="numberC[3]"/>

Vous pouvez facilement définir les valeurs comme ceci :

    var testArray = ['hi', 'bye', 'stackoverflow'];
    for(let i in testArray) {
        document.querySelector('#numberC\\[' + (+i+1) + '\\]').value = testArray[i];
    }
0
Alexey Zelenin 15 mars 2019 à 12:25