Beim versenden des Formulars via Ajax kommt nur ein Ladescreen

Hallo,

ich versuche gerade das, auf einer eigenen Seite eingebundene, Formular via Ajax zu versenden (außerdem wurde ein link in "Redirect to an external link after submission" eingefügt um alle Daten in einer eigenen DB zu speichern).

Das Formular soll versendet werden, wenn der User ein <input> Feld verlässt (beim verlassen wird die Funktion sendViaAjax(form) aufgerufen -> Funktioniert soweit auch).

Die Funktion sieht dann wie folgt aus:

function sendViaAjax(form) {   

var form = $(form).find("form");   

var url = form.attr('action');   

console.log(url);   

$.ajax({   

type: "POST",   

url: url,   

data: form.serialize(),

success: function(data) { 

alert(data); 

} });

Anschließend wird das Formular auch versendet bzw. es folgt folgender endloser Ladescreen:

Hat jemand damit Erfahrung, bzw. hat jemand eine Idee woran es liegen könnte oder wie man es lösen könnte?

Viele Grüße

Leopold

Hallo,

Könnten Sie uns die Webseite, auf der das Formular eingebettet ist mitteilen, und auch um welches Formular es sich handelt? Dann können wir Ihnen besser helfen.

Wir warten gerne auf Ihre Antwort.

Hallo,
danke für Ihre Antwort. Momentan befindet sich das alles noch Lokal...
Gerne kann ich Ihnen den Sourcecode zusenden, sollte das helfen?

Bei dem Formular handelt es sich um folgendes:
https://form.jotform.com/210401911635040
Das gleiche Problem tritt allerdings auch bei anderen Formularen auf.

Ich habe nun einen kleinen Prototypen online gestellt. Diesen finden Sie hier: http://jotform.leopold-linder.de/

Um den Post via Ajax zu triggern bitte in das <input id="input_5"> Feld (Label Kleines Grundstuck) klicken und dann wieder rausklicken (Grund ist die Funktion .blur(), welche auf #input_5 liegt). Anschließend wir die Funktion sendViaAjax() aufgerufen.

Hallo,

Bitte entschuldigen Sie die späte Antwort.

Ich habe bei einem Kollegen Rat eingeholt. Dieser meint folgendes:

Ihr Formular hat POST mit externer Dankes-URL aktiviert, das ist wahrscheinlich der Grund, warum der Umleitungsprozess in der Vorschau nach dem Ajax-Post angezeigt wird. Ich schlage vor, POST in den Formulareinstellungen zu deaktivieren und die externe Dankes-URL direkt im Ajax-Skript des Benutzers zu verwenden. z. B. von

  $.ajax({

type: "POST",

url: url,

ZU

   $.ajax({

type: "POST",

url: "https://laurehaus.test/api/jotform/update",

Derzeit ist der Formularfluss so On edit > submit form > submit custom POST url, was wohlmöglich redundant ist. Würde nicht auch On edit > submit custom POST url reichen?

Die Formularumleitung funktioniert nicht mit Ajax, deshalb bleibt sie wahrscheinlich im Umleitungsprozess (Laden) stecken.

Ich hoffe diese Erklärungen machen für Sie etwas Sinn. Ich selbst habe leider zu wenige Ajax-Erfahrung, um das zu beurteilen.

Hallo,

vielen Dank für Ihre Antwort.
Würde nicht auch On edit > submit custom POST url reichen? -> Ja
So bzw. so ähnlich haben wir es nun auch umgesetzt.
Den "action" Link im <form> haben wir nun direkt zu einem Link, welcher auf unsere Seite zeigt ausgetauscht. Somit ist auch das ajax Problem gelöst und wir können alle Daten in unsere DB speichern (was ausreicht).