Input wird dem Formular nicht hinzugefügt.

  • Hallo,


    ich versuche schon seit Tagen Stripe als Zahlungsabwickler in meine Laravel App zu implementieren, jedoch ohne Erfolg. Mein Hauptproblem ist das mein submit event, soweit ich das feststellen kann nicht funktioniert, da mein console.log() nie ausgeführt wird bzw meinem Formular die "payment_methode" nie hinzugefügt wird. Nachfolgend mein Javascript und HTML code, damit ihr mir vielleicht helfen könnt.



    Normalerweise müsste mir Stripe, nachdem die Kartennummer verschickt wurde, eine Zahlungsmethode zurück geben, die ich dann über ein hidden input in mein Formular einfüge und an meinen Controller sende, um die subscription abzuschließen. Vielleicht hier noch mein Formular.


    Ich würde es wirklich sehr schätzen, wenn mir bei diesem Problem jemand helfen könnte, da ich schon seit Tagen versuche es zu lösen. Sollten noch Information gebraucht werden, bitte Bescheid geben.


    MfG

  • Hi,


    ich habe mir das mal angeschaut, an für sich stimmt der code soweit. Auch wenn das console.log nicht ausgeführt wird, wird denn das Event ausgeführt?


    du könntest über das "preventDefault" mal ein debugger setzen (das führt dazu dass das script an der stelle vom debugger angehalten wird). Vielleicht treten andere JS Fehler in deinem code auf, weswegen dein event nicht ausgeführt wird.


    D.h. heir müsste man das in der Anwendung selbst testen.


    1. Treten JS-Fehler in der Konsole auf beim Laden / Clicken des Button? (das problem ist ja, dass beim Klicken des Button das Form gleich abgesendet wird, daher sieht man ggf. nicht was im Fenster davor passiert ist. Daher kann es nützen an ein paar stellen einfach dass keyword debugger einzufügen).


    2. Um schnell zu prüfen ob die Daten da sind könntest du das Form von POST auf GET stellen um dann beim weiterleiten zumindest in der URL die parameter zu sehen.


    Viele Grüße


    Timo

  • Hallo Timo, vielen Dank für deine Antwort!


    ad 1) Es ist so ich speichere mir die gesamte Konsolen Ausgabe über "preserve log" ab, habe es jedoch jetzt auch mit "debugger" versucht. Siehe da das submit event wird nicht ausgelöst. Setze ich vor dem event einen debugger wird angehalten setze ich direkt vor dem preventDefault einen debugger passiert nichts. Jetzt stellt sich mir die Frage warum das so ist?


    ad 2) Habe mir das $request object schon ausgeben lassen über dd($request) in meinem controller, jedoch bekomme ich nur den csrf token , über GET genau das gleiche leider :)


    MfG

  • Morgen,


    wenn es nicht in das Submit event läuft fallen mir auf Anhieb nur zwei gründe ein.


    1. Es treten andere Fehlermeldungen auf die dazu führen das der entsprechende JS-Code (Submit Event) nicht erreicht werden kann.

    2. Etwas anderes überschreibt das submit-event (das kann sein, da du ja scheinbar weitere frameworks nutzt).


    Da ich das andere Framework aber nicht kenne, ist es für mich schwer da eine aussage zu treffen.


    Das vorgehen wäre hier zum einen, das problem zu verkleinern, d.h. so lange code-teile entfernen bis es funktioniert und dann schauen welche stelle das ausführen verhindert.


    Oder einen anderen weg gehen. Du kannst das Submit ja auch anders Triggern, wenn du dem button noch den type button mit gibst type='button' dann triggert er das Submit event nicht mehr. Stattdessen nimmst du den Inhalt deines Form-Submit-Event und bindest es an den Button im click event und schaust ob dann der code ausgeführt wird. Da du am ende ja nochmals ein form.submit() ausführst sollte das dennoch gehen.

    Schau mal ob du so erstmal zum ziel kommst.


    Grüße


    Timo

  • Morgen Timo!


    ad 1) Ich poste hier einfach mal Bilder meiner Konsole. Eines vor dem absenden des Formulars und eines danach. Andere Fehlermeldungen wären mir nicht aufgefallen.


    ad 2) Also ich verwende Laravel(PHP-Framework) das mit Vue.js ausgeliefert wird. Vue sollte aber nicht wirklich einen Einfluss haben, da ich das Javascript ausserhalb der id="app" positioniert habe.


    Ich hab mittlerweile alles bis auf den Eventlistener gelöscht, jedoch kein Erfolg er geht nie in die Funktion hinein. Das versteh ich einfach nicht.


    Deine Änderungen hab ich übernommen, jedoch funktioniert das auch nicht. ;(


    Trotzdem danke für deine Tipps!


    MfG

  • Hi,


    wenn das mit dem Click auch nicht Funktioniert und das zweite Bild beim "click" passiert, dann würde ich es auf diese Fehler schieben. Dein Code


    Code
    1. cardElement.addEventListener('change', function(event) {
    2. if (event.error) {
    3. cardError.textContent = event.error.message;
    4. } else {
    5. cardError.textContent = '';
    6. }
    7. });

    befindet sich ja vor dem Form submit und in der Ausgabe wirft der vermutlich die fehler (zumindest ist das der einzige punkt in deinem code, der textContent beinhaltet. Wenn die Fehler weg sind, könnte es gehen.


    Da scheinbar cardError null ist, kannst du in dem event ja einfach mal ein


    Code
    1. if(cardError == undefined){ console.log(event.error); return;}

    rein machen, das zumindest die Fehler nicht mehr auftreten und schauen ob du dann weiter kommst.


    Grüße


    Timo

  • Das mit dem click funktioniert leider auch nicht.... ;( Den Code habe ich sowieso schon rausgenommen damit ich das als Fehlerquelle ausschliessen kann.


    Also ich bin echt ratlos was das sein könnte..


    MfG

  • Ich kenne leider Lavarel nur vom namen und bei Vue.js bin ich auch nur etwas drin. Aber ggf. überschreibt hier etwas.

    Aber wenn du sagst, das es außerhalb des Kontext läuft, dann würde ich nochmals versuchen einen code zu schreiben, der außerhalb deiner Anwendung richtig funktioniert und den hinein kopieren und schauen ob es noch läuft.


    Ab dem punkt, müsstest du etwas tiefer in das JS-Debugging eintauchen :D. Gerade in Chrome über die Console bekommst du ja alle Informationen die irgenwie im Dom hängen, so z.B. auch die registrierten Event Listener.


    https://developers.google.com/…c#geteventlistenersobject

    Du kannst also über das Form Element einfach mal schauen, ob dein Event Listener noch gesetzt ist ab einem bestimmten Zeitpunkt.


    Du kannst auch schauen ob dein Event funktioniert wenn du es im html direkt platzierst.

    https://www.w3schools.com/tags/ev_onsubmit.asp


    Ansonsten wüsste ich nicht wie ich hier direkt weiterhelfen kann.


    Grüße


    Timo

  • Mein Hauptproblem ist das mein submit event, soweit ich das feststellen kann nicht funktioniert, da mein console.log() nie ausgeführt

    Naja, soweit ich das sehe, ist die Ausgabe in der Konsole nur von einer Bedingung abhängig, das macht das Debugging relativ einfach!

    error wird nicht gesetzt sein, lass Dir doch mal error vor der Bedingung ausgeben, nur so zum Spaß.


    Da das vermutlich null, false oder undefined ergibt, schaut man sich die Stelle an, an error gesetzt werden müsste, also bei stripe.handleCardSetup.


    Na, wer kommt drauf, was man sich dann wohl als nächstes anschauen sollte? ;)


    Und wenn da das erwartete raus kommt, kann man anfangen, die nachfolgenden Prozesse in Frage zu stellen.

  • Arne Drews Wenn ich das da oben richtig gelesen habe, ist das problem aktuell, das er nicht in das Submit-Event hinein geht. Damit kommt er ja nicht mal zu dem Punkt den du hier vorschlägst...


    Aber damit ich da nichts falsch verstanden habe Nastypasty

    Wenn du den

    mit


    Code
    1. form.addEventListener('submit', (e) => {
    2. e.preventDefault();
    3.     console.log("Inside Event");
    4. });

    ersetzt, dann wird das console.log() nicht ausgeführt. Richtig?


    Grüße


    Timo

  • Danke für die vielen Antworten! Ich hab gerade zu Testzwecken ein neues Laravel Projekt aufgesetzt und den Code kopiert und mit den dementsprechenden Routes ausprobiert und siehe da es geht ..... Was ich jetzt nicht verstehe wieso es in meinem Projekt nicht geht?


    Ja genau soweit kommt es gar nicht.. das ist das Problem


    MfG

  • Ich hab den Fehler gefunden, es liegt tatsächlich an vue und zwar an den divs


    Code
    1. <div id="app">
    2. </div>

    jetzt steh ich schon vor dem nächsten Problem wie ich das mit vue umsetze, dachte ich könnte das mit plain js auch machen... ;(


    Aber vielen dank für eure Hilfe!


    MfG