Récupérer les valeurs d'input en tableau pour faire des calculs

Bonjour,
nouveau sur le forum. Ex guru Powerbuilder et SQL, je développe maintenant bcp en php mais assez peu en JS.
Mon problème est assez simple.
Soit, dans un form une série de 3 inputs du genre (bien sûr dans la réalité, il y a n lignes et tout est généré par php).

Code:

---

1 2 3

<input type="text" name="montant[]" onchange="Recalcul(1)"> <input type="text" name="montant[]" onchange="Recalcul(2)"> <input type="text" name="montant[]" onchange="Recalcul(3)">

---

Sachant, par exemple que la somme des n montants saisis doit toujours faire 1000 (exemple simplifié aussi),
Comment, dans la fonction JS Recalcul(), puis-je récupérer les valeurs des 2 premiers éléments du tableau, puis affecter la différence à 1000 dans le dernier élément ?
Autant, quand on utilise des inputs uniques, faire ça est trivial avec nom_input.value, à la fois pour récupérer comme pour affecter des valeurs, autant ça semble se compliquer terriblement dès qu'on travaille en tableau d'input...
Toutes mes recherches sur le net aboutissent à des solutions qui me paraissent bien complexes. Je précise que je ne souhaite pas mettre en oeuvre une quelconque librairie ni de Jquery ou autre. Uniquement du JS standard.

Help ? Merci

getElementsByName() te retournera la collection des inputs ...
il te suffira de boucler dessus soit pour basculer dans un array ou faire tes calculs directement ...

Merci pour cette réponse.
C'est ce que j'ai essayé, bien sûr, mais je n'y suis pas parvenu. Un petit exemple serait le bienvenu.
je fais un

Code:

---

var allEls=window.document.form1.getElementsByName("montant[]");

---

et le débogueur me dit que l'objet ne gère pas la méthode getElementsByName.
j'ai bien sûr essayé sans spécifier les crochets.

petit indice:

Code:

---

const inp=document.forms[0]['montant[]']

---

Code:

---

var allEls=document.getElementsByName("montant[]");

---

Voici un contrôle pour des entiers positifs (très simplifié, comme tu dis);

Code:

---

1 2 3 4 5

<form> <input type="number" name="montant[]"> <input type="number" name="montant[]"> <input type="text" readonly name="montant[]"> </form>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

const inp=document.forms[0]['montant[]'] inp.forEach((v,i,t)=>{ v.addEventListener("change",(e)=>{ if(Number(t[0].value)>0 && Number(t[1].value)>0 && Number(t[0].value)+Number(t[1].value)<1000){ t[2].value=1000 - t[0].value - t[1].value } else{ t[2].value="erreur de saisie" } }) })

---

Citation:

---

Envoyé par SpaceFrog

Code:

---

var allEls=document.getElementsByName("montant[]");

---

---

Merci javatwister et Spacefrog !
en effet, juste après avoir posté ma réponse, je me suis aperçu que le getElementsByName() ne s'appliquait pas form1 mais à document.
Je ne suis pas très à l'aise avec la hiérarchie des objets en JS (ça me gonflait déjà copieusement en VB...)
Je récupère donc bien les valeurs maintenant (méthode Spacefrog).
Il me reste juste à renvoyer le résultat du calcul dans le dernier input du tableau et là, j'avoue que je sèche.
je tente un

Code:

---

1 2	window.document.form1.montant[2].value = resultat;

---

mais bien sûr, cela ne fonctionne pas...
Sans passer par la méthode de Javatwister, peut-on affecter directement le résultat au dernier input ?

https://jsfiddle.net/jgew3khb/

Euh... t'as essayé mon code ou bien?

ptit exemple: http://javatwist.imingo.net/calcinput.htm

Citation:

---

Envoyé par javatwister

Euh... t'as essayé mon code ou bien?

---

à Javatwister : j'ai essayé le code de Spacefrog à base de getelementsbyname(), même si je ne doute pas un seul instant que ton code fonctionne.

à Spacefrog : j'ai vu ton code sur jsfiddle . On est pas loin mais ce que je veux faire, c'est adresser directement la value de montant[2] (dans l'exemple simpliste).
C'est dans le cadre de la saisie d'un budget prévisionnel sur plusieurs années. Il y a une somme à ne pas dépasser (connue par ailleurs dans un input hidden) et à chaque modification d'un montant, je veux que le reliquat s'affiche par défaut dans le budget de la dernière année (y compris en négatif si on a tapé trop haut !).
C'est pourquoi je souhaite alimenter directement montant[imax].value (si c'est possible), et non pas un résultat en dehors du tableau.

Mais merci encore à tous les deux. J'en apprends beaucoup grâce à vous.

Dans le dernier des names...

Code:

---

1 2 3 4 5 6 7

<form> <input type="number" name="montant[]"> <input type="number" name="montant[]"> <input type="number" name="montant[]"> <input type="number" name="montant[]" readonly > <input type="button" id="go" value="calcul" /> </form>

---

Code:

---

1 2 3 4 5 6 7 8 9

function addUp(){ elts=document.getElementsByName('montant[]'); total=0; il=elts.length for ( i=0; i<il-1; i++) { total += +elts[i].value; } elts[i].value=total }

---

Un grand merci. ça fonctionne une fois adapté à mon exemple et j'en suis très étonné car pour moi, dans ton code, elts était une variable de portée locale à la fonction addUp() et je n'imaginais pas qu'en adressant sa value, ça allait rétroagir sur montant[] ! En fait, je comprends maintenant que c'est un pointeur vers montant[], ce qui change tout !!
Cela signifie donc qu'en instanciant elts, on crée une référence à montant[].
me coucherai moins bête ce soir...
Merci aussi à Javatwister. Je garde ton code en mémoire pour quand je serai un peu moins newbie en JS.