Javascript greift nicht auf mittels Ajax gefüllte Input-Felder zu

  • Hallo an die Javascript/Ajax-Könner,


    folgendes Problem bekomme ich selbst nicht gelöst, woran ich mittlerweile zahllose Stunden sitze :|


    Ich lasse mittel Ajax ein Formular (Kostenangebot) aus einer Datenbank füllen, darunter auch reichlich Input-Felder mit Preisen. Diese haben bekannter Weise das Format 12,34, sprich 2 Nachkommastellen. In der Datenbank selbst ist das richtige Format hinterlegt (mit Komma, nicht mit Punkt). Wenn ich mittels Ajax jetzt einen Preis in ein Input-Feld setze, zeigt es keine Nachkommastellen an. Daraus resultiert, dass das anhängige Javascript den Gesamtpreis nicht richtig addiert. Angenommen ich habe einen Preis von 15,50€ und Ajax lädt nur 15€ nach, stimmt am Ende der Gesamtpreis ja nicht mehr. Trage ich es manuell ein, funktioniert das Additionsscript fehlerfrei. Sämtliche Versuche mit .toFixed(2) sind bislang gescheitert. Anbei mal paar Codeschnipsel aus meienm Script:


    Auszug aus dem Formular was mittels Ajax gefüllt wird:

    Auszug des Ajaxscripts:

    Javascript was dann nicht mehr greift, bzw. falsch rechnet durch fehlende Nachkommastellen:

    Die stmmactionangebot.php:

    Kurz zur Erklärung...ich lasse mir mittels eines zuvor angelegten Angebots/Kostenvoranschlag über die Angebotsnummer mittels ajax durch Eingabe der Angebotsnummer alles in den Auftrag laden.


    Es funktioniert soweit ja alles...bis auf das Problem der Nachkommastelle. Gebe ich es manuell ein, funktioniert alles tadellos. Hat eventuell jemand einen Ratschlag was ich übersehen habe?


    :/

  • Ich lasse mittel Ajax ein Formular (Kostenangebot) aus einer Datenbank füllen, darunter auch reichlich Input-Felder mit Preisen. Diese haben bekannter Weise das Format 12,34, sprich 2 Nachkommastellen. In der Datenbank selbst ist das richtige Format hinterlegt (mit Komma, nicht mit Punkt).

    Wie kommst du darauf dass es mit Komma richtig wäre? Richtig ist mit Punkt, alle Programmiersprachen (und auch HTML, siehe unten) und Datenbanken erwarten einen Punkt als Dezimaltrenner.

    Zitat

    Auszug aus dem Formular was mittels Ajax gefüllt wird:

    Das Formular ist kaputt:

    • die Felder haben keine Beschriftung (label-Element) und nein, placeholder ersetzt diese nicht!
    • die Felder für Anzahl und Preis wären gerne vom Typ »number«, damit erleichterst du dem Benutzer die Eingabe und kannst auch Grenzen (min-/max-Attribute) und Schritte (step-Attribut) definieren. Wichtig: bei Preisen müssen die Werte einen Punkt als Dezimaltrenner haben, dargestellt werden sie dann mit Komma (wobei das von den Einstellungen des Browsers/Betriebssystems abhängig ist)
    • das readonly-input wäre gerne ein output-Element.
    Zitat

    Die stmmactionangebot.php:

    Der Code hat gleich mehrere Problem (eines davon ist gefährlich!):

    • du übernimmst ohne den Kontextwechsel zu beachten/behandeln Werte von außen in den SQL-Query - das ist gefährlich! Unbedingt den im Query eingebauten wert behandeln, ich empfehle prepared Statements (geht auch mit mysqli, ich empfehle aber PDO)
    • das Umkopieren von Werten aus $_POST ist unnötig
    • niemals »SELECT *« verwenden, immer alle Spalten angeben die benötigt werden. Ja, auch wenn es (aktuell) alle sind
    • der Query liefert nur einen Datensatz, oder? Wofür dann das while?
    • die durchnummerierten Spalten deuten auf ein defektes Datenbankdesign hin
    • lass ?> weg wenn nicht anschließend HTML kommt, damit vermeidest du potentielle Problem mit versehentlich ausgegebenem Whitespace

    Dein eigentliches Problem dürfte aber das unpassende Datenformat sein in dem du die Werte an Javascript schickst: du klebst einfach alles mit Komma zusammen und trennst es im Javascript wieder auf - allerdings ohne Rücksicht darauf ob der Wert selbst auch ein Komma enthält … Verwende besser ein Format wie JSON, damit solltest du das Problem nicht haben (PHP und Javascript können beide standardmäßig mit JSON umgehen).

  • Hey tk1234,

    danke für Deine Antwort.


    Ich arbeite mal ab:

    Zitat

    Wie kommst du darauf dass es mit Komma richtig wäre? Richtig ist mit Punkt, alle Programmiersprachen (und auch HTML, siehe unten) und Datenbanken erwarten einen Punkt als Dezimaltrenner.

    Das es mit Punkt korrekt ist, ist mir bewusst. Ich hatte es einfacherhalber mit Komma in die Datenbank schreiben lassen um im Nachgang die Werte nicht wieder in Komma umwandeln lassen muss. Ich ändere dies aber jetzt wieder um Fehlerquellen zu vermeiden.


    Zitat

    Das Formular ist kaputt:

    • die Felder haben keine Beschriftung (label-Element) und nein, placeholder ersetzt diese nicht!
    • die Felder für Anzahl und Preis wären gerne vom Typ »number«, damit erleichterst du dem Benutzer die Eingabe und kannst auch Grenzen (min-/max-Attribute) und Schritte (step-Attribut) definieren. Wichtig: bei Preisen müssen die Werte einen Punkt als Dezimaltrenner haben, dargestellt werden sie dann mit Komma (wobei das von den Einstellungen des Browsers/Betriebssystems abhängig ist)
    • das readonly-input wäre gerne ein output-Element.

    Label-Elemente werden nachgeholt, Type Number ist ein guter Tipp, wird umgesetzt. Wie meinst Du das mit dem output-Element? Stehe da gerade etwas auf dem Schlauch?


    Zitat

    Der Code hat gleich mehrere Problem (eines davon ist gefährlich!):

    • du übernimmst ohne den Kontextwechsel zu beachten/behandeln Werte von außen in den SQL-Query - das ist gefährlich! Unbedingt den im Query eingebauten wert behandeln, ich empfehle prepared Statements (geht auch mit mysqli, ich empfehle aber PDO)
    • das Umkopieren von Werten aus $_POST ist unnötig
    • niemals »SELECT *« verwenden, immer alle Spalten angeben die benötigt werden. Ja, auch wenn es (aktuell) alle sind
    • der Query liefert nur einen Datensatz, oder? Wofür dann das while?
    • die durchnummerierten Spalten deuten auf ein defektes Datenbankdesign hin
    • lass ?> weg wenn nicht anschließend HTML kommt, damit vermeidest du potentielle Problem mit versehentlich ausgegebenem Whitespace

    Dein eigentliches Problem dürfte aber das unpassende Datenformat sein in dem du die Werte an Javascript schickst: du klebst einfach alles mit Komma zusammen und trennst es im Javascript wieder auf - allerdings ohne Rücksicht darauf ob der Wert selbst auch ein Komma enthält … Verwende besser ein Format wie JSON, damit solltest du das Problem nicht haben (PHP und Javascript können beide standardmäßig mit JSON umgehen).

    Sofern ich das eigentliche Problem in den Griff bekommen habe, wird auch alles (habe mehrere Sachen noch mit mysqli) auf pdo umgestellt. Sind noch paar andere Baustellen vorhanden die Vorrang haben. Zu SELECT *...was spricht in dem konkreten Fall gegen ein *? Der Wert nach dem gesucht wird, ist quasi unveränderbar vorgegeben und kann durch den Benutzer nicht geändert werden. Bei manipulierbaren Datenabfragen verstehe ich diese Sorge durchaus. Die durchnummerierten Spalten liegen an dem Datensatz selbst. Es gibt 20 Posten-Möglichkeiten bei einem Angebot die einzeln hinterlegt werden. Nach dem Prinzip: Artikel1 [Code-Bezeichnung] [Bezeichnung] [Anzahl][Preis netto] [Preis netto gesamt (Preis netto * Anzahl)]; Artikel2 [Code-Bezeichnung] [Bezeichnung] [Anzahl][Preis netto] [Preis netto gesamt (Preis netto * Anzahl)]...usw. Wie würdest Du es anders lösen? Das ?> wurde soeben ausradiert ;)

  • Ich hatte es einfacherhalber mit Komma in die Datenbank schreiben lassen um im Nachgang die Werte nicht wieder in Komma umwandeln lassen muss.

    Die Datenbank brauch einen Punkt, sonst kann sie nicht damit rechnen. Andersrum wird eher ein Schuh daraus: verwende intern immer den Punkt als Dezimaltrenner - nur dann wenn du die Werte als Text (in einem Eingabefeld bleibt der Punkt) ausgibst, bekommt der Benutzer den Wert ordentlich mit Komma formatiert angezeigt.

    Wie meinst Du das mit dem output-Element? Stehe da gerade etwas auf dem Schlauch?

    Die Felder die ein readonly-Attribut haben sind doch dazu da um die Ergebnisse von Javascript-Berechnungen auszugeben, oder? Das sind also keine Eingabe- sondern Ausgabefelder - und dafür gibt es output (die natürlich nur sichtbar sein sollten wenn Javascript auch aktiviert ist, ohne JS sind die ja relativ sinnlos)

    Zu SELECT *...was spricht in dem konkreten Fall gegen ein *?

    Siehe z.B. https://www.pg-forum.de/t/waru…rom-verwenden-sollte/5062 (ja, der Eintrag ist schon älter, er ist aber immer noch aktuell)


    Der Wert nach dem gesucht wird, ist quasi unveränderbar vorgegeben und kann durch den Benutzer nicht geändert werden.

    Das ist ein Irrtum: der Wert wird per POST-Request übertragen und kann damit vom Benutzer manipuliert werden (schon klar, vielleicht nicht von jedem Laien grundsätzlich ist es aber möglich). Kontextwechsel müssen *immer* behandelt werden ohne Ausnahme! (das gilt übrigens nicht nur für die zu SQL sondern z.B. auch für die nach HTML, d.h. wenn du irgendwas im HTML-Code an den Browser ausgibst)


    Es gibt 20 Posten-Möglichkeiten bei einem Angebot die einzeln hinterlegt werden.

    Da lag ich ja richtig, das Datenbankdesign ist tatsächlich kaputt: was ist wenn z.B. nur ein Posten hinterlegt wird, oder was ist wenn es mal 21 Posten sein sollen? Die Posten gehören in eine zweite Tabelle in der jeder Datensatz einen Posten zu einem Angebot enthält - beschäftige dich mit dem Thema Normalisierung.


    Bist du bei deinem eigentlichen Problem weitergekommen? Liegt es an dem Komma als Feldtrenner an dem Javascript wieder aufgetrennt wird?

  • Hallo tk1234,


    sorry für die verzögerte Antwort. Ich bin bis dato einfach noch nicht wieder dazu gekommen. Mit meinem Problem bin ich nach den Umsetzungen Deiner Ratschläge weitergekommen. Zu guter Letzt war wirklich die Feldtrennung die Fehlerquelle. Ich habe jetzt aber alles normgerecht geschrieben und siehe da: Es funktioniert. Bis auf das Datenbankdesign (woran ich gerade sitze) ist alles gefixt. Vielen Dank dafür.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!