Dynamisch erzeugte Formualrelemente mit identischem Namen/ID in JS einlesen.

[Wolf-Tilmann]

Hallo Zusammen,

für viele von Euch dürfte meine Frage ein Kleinigkeit sein.

Mittels PHP erzeuge ich dynamisch Formularelemente.
Diese werden später auf dem Server erneut von php verarbeitet.

Im Browser benötige ich jedoch auch eine Weiterverarbeitung. Das soll Javascript erledigen.
Die Formularelemente (input) haben den Namen bzw. die ID "b306[1]", "b306[2]", "b306[3]" usw. je nach den Eingaben im ersten Formular. Es könnnen 1 bis X Felder werden.
Wie kann ich die Daten der Inputfelder mit Javascript in ein Array einlesen?

Vielen Dank schon einmal für Eure Hilfe.

Euer
Wolf-Tilmann

[hellbringer]

Zum Beispiel mit document.getQuerySelectorAll.

const inputValues = Array.from(
    document.querySelectorAll('input[name^="b306["]')
).map(input => input.value);

[Wolf-Tilmann]

Vielen Dank,

kannst Du bitte noch einmal meinen Code ansehen?

function suve(festl) {
const beleg = festl;    
var gsuve = 0;
const belbetrag = beleg+"_betrag";
const inputValues = Array.from(
   document.querySelectorAll('input[name *= belbetrag]')
).map(input => input.value);
console.log("laenge: " + inputValues.length);
for (i = 0 ; i < inputValues.length; i++ ) {
    var dazu = inputValues[i];
        dazu = dazu.replace(",",".");
    dazu = parseFloat(inputValues[i]);
    if (!isNaN(dazu)) {

    gsuve = gsuve + dazu;
        dazu = dazu.replace(".",",");
document.querySelectorAll('input[name *= belbetrag[i]]').value = dazu;
}
}
summenfeld = beleg+"_gesamt";
document.getElementById(summenfeld).value = gsuve;
}

Hier wird kein Wert eingelesen und verarbeitet.

bei document.querySelectorAll('input[name *= "306_betrag[]"]')
werden die Werte eingelesen.

Nur ändert sich je nach Eingabe im ersten Formular das vor dem "_betrag".

[kaminbausatz]

Ich habe es nur überflogen, mir fällt auf:
Eine Zahl hat keine replace Funktion,
einen Selector ....trag[i] ikann es nicht geben,
querySelctorAll('...').value gibt es auch nicht

[Wolf-Tilmann]

O.K. und wie greife ich dann auf die Inputfelder mit den identischen Namen zu?

Ich bekomme eine unbekannte Anzahl Felder mit Zahlen mit deutscher Notation. Die baue ich mit replace um in englische Zahlen, verarbeite sie und schreibe sie nach einem erneuten replace mit deutscher Notation zurück in die Inputfelder.
Die Namen der Felder beginnen mit diversen dreistelligen Zeichen. Dann kommt "_betrag".

Wie oben geschrieben, wenn ich document.querySelectorAll('input[name *= "306_betrag[]"]') verwende bekomme ich meine Zahlen.

[tk1234]

document.querySelectorAll('input[name *= belbetrag]')

Das macht nicht das was du vermutlich erwartest - die Variable belbetrag wird hier nicht aufgelöst, du musst Javascript schon eine Chance geben die Variable zu erkennen: querySelectorAll(`input[name *= ${belbetrag}]`) (Und ja, die Backticks gehören so).

[Wolf-Tilmann]

hier bekomme ich die Fehlermeldung

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'input[name *= 306_betrag]' is not a valid selector.

[tk1234]

hier bekomme ich die Fehlermeldung

Spender dem Selector noch Anführungszeichen um die Variable: document.querySelectorAll(`input[name *= "${belbetrag}"]`)

[Wolf-Tilmann]

Super. Vielen lieben Dank. Das hat funktioniert.