Variable in Javascript übergeben bei dynamischen Inputfeldern

[Rolf B]

Hallo Lynnv,

ich könnte in's gleiche Horn wie Gunnar stoßen, aber klingt sicher besser, wenn ich Gitarre dazu spielen (wobei das eigentlich Gunnars Instrument ist 😂).

Vorweg: Arbeitest Du für Designbock oder bist Du dort Kunde?

Ich werde gleich auch was zu deinem Problem schreiben, aber erstmal kommt mein Gitarrensolo 😉

1. htmlspecialchars - nicht gedankenlos einsetzen

Gunnars Hinweis zu htmlspecialchars auf der PHP Seite ist richtig und wichtig, aber eine Prise Salz gehört dazu. Diese Aufbereitung ist an den Stellen erforderlich, wo Daten Strings sind. Also Werte aus $_POST und $_GET, oder Textspalten einer Datenbank (alles, was im DB-Handbuch unter "String Data Types" steht). Bei numerischen Werten ist htmlspecialchars unangebracht, da muss man sich eher überlegen, ob man eine andere Form der Aufbereitung für den Leser braucht (z.B. zwei Nachkommastellen bei Geldbeträgen, Tausendertrenner, etc). In deinem Fall sieht $index nach einem Schleifenzähler oder so etwas aus, das ist ein ganzzahliger Wert der als Ganzzahl ins HTML soll, und den brauchst Du gar nicht zu behandeln. Aber: sowas nie ohne Nachdenken tun. Sobald Du einen Variableninhalt ins HTML einbaust, innehalten, überlegen wo das herkommt, die richtige Behandlung festlegen.

2. Inkonsistente Eingabefelder

<input ... name='B8[<?php echo $index?>]' value='<?php echo $B8?>'/>

Das ist widersprüchlich. Der name des input legt nahe, dass es das Feld mit dem Namen B8 mehrfach gibt. Im PHP sollte $B8 demzufolge ein Array sein. Aber du gibst für den value $B8 aus, nicht $B8[$index]. Das passt also nicht zusammen. Entweder beides ein Array, oder beides nicht. Alles andere ist unlogisch.

3. Lineare Programmierung?!

1x<br> Fingerlinge
<input ... value='<?php echo $B8?>'/>
1x<br> Sch&uuml;rze
<input ... value='<?php echo $B9?>'/>

Das ist doch eine Art Warenkorb? Warum stehen Bestellmenge und Artikelname da als Konstante? Warum verwaltest Du den PHP-Seitig in unterschiedlichen Variablen - das kann die Verarbeitung nur unnötig kompliziert machen und erfordert sicherlich massive Code-Doppelungen. Es sollte im PHP genau ein fettes Array geben, worin alle Bestellungen stehen und woraus Du die Warenkorbansicht erzeugst.

Ach ja, und wenn Du deinen HTML Quelltext mit einem Editor bearbeitest, der UTF-8 Codierung beherrscht, und dein Webserver das auch korrekt dem Browser mitteilt, dann kannst Du "Schürze" schreiben statt "Schürze".

4. Namenswiderspruch

<span id="output111">Startwert</span> 

document.getElementById("output1").innerHTML = ...; 

getElementById tut genau das: Es sucht das HTML Element mit dieser ID heraus und gibt das entsprechende Objekt aus dem Dokument-Objektmodell (DOM) zurück. Ein Element mit der ID output1 gibt es aber nicht. Es heißt bei Dir output111. Beide Namen sind wenig sinnvoll, überleg Dir einen ordentlichen und verwende ihn konsistent.

Die Zuweisung an die Eigenschaft innerHTML des output-Elements funktioniert, ist aber eigentlich nicht richtig. Du weist kein HTML zu, sondern Text. Deswegen sollte die Zuweisung an textContent erfolgen, nicht an innerHTML. Damit hängst Du zwar Internet Explorer vor Version 9 ab, aber der interessiert heutzutage wohl niemanden mehr.

5. Deine eigentlich Frage

So, und nun zu deinem eigentlichen Problem: Du hast eine variable Anzahl Betragsfelder im Formular und möchtest diese aufsummieren. Eine variable, unbekannte Anzahl verarbeitet man mit einer Schleife.

Ich habe im folgenden Text übrigens Links in unser Wiki untergebracht, bei Unklarheiten folge erstmal den Links. Möglicherweise hast Du viel Lesebedarf.

Zum Summieren musst Du die input Elemente erst einmal finden. Das gelingt mit der DOM Methode querySelectorAll. Sie bekommt einen CSS Selektor und liefert alle Elemente im DOM, die darauf passen.

let betraege = document.forms.Bestellungen.querySelectorAll("input[type=number]");

Das sucht alle input-Elemente mit dem Attribut type="number" heraus und liefert Dir etwas Array-ähnliches: eine NodeList. Die musst Du nun in einer Schleife verarbeiten. Die Anzahl der Elemente in der Nodelist steht wie bei einem Array in der length-Eigenschaft, und wie bei einem Array greifst Du auch auf die Einträge zu.

let summe = 0;
for (let i=0; i<betraege.length; i++) {
   let summe = summe + betraege[i].valueAsNumber;
}
document.getElementById("output111").textContent = summe;

(an alle Verbesserer: Ich habe .forEach mit Callback bewusst NICHT gezeigt)

Hey, das war's fast schon. valueAsNumber liefert Dir den numerischen Wert eines type="number" Feldes. Um das Problem "Punkt oder Komma", das Du in deinem Code mit replace behandelt hast, kümmert sich valueAsNumber selbst.

Die Frage ist noch, ob Du die Summe irgendwie als Betrag formatieren willst. Mit zwei Nachkommastellen und so. Das ist in JavaScript mit Hilfe von Intl.NumberFormat möglich (Infos bei Mozilla. Die letzte Zeile wird dann durch dies hier ersetzt:

let formatter = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
document.getElementById("output111").textContent = formatter.format(summe);

und Du bekommst zwei Nachkommastellen und ein Eurosymbol automatisch dazu.

Rolf