it-swarm.com.de

Fehler beim Abrufen "Das Senden des Formulars wurde abgebrochen, da das Formular nicht verbunden ist"

Ich habe eine alte Website mit JQuery 1.7, die bis vor zwei Tagen korrekt funktioniert. Plötzlich funktionieren einige meiner Buttons nicht mehr und nach dem Anklicken erhalte ich diese Warnung in der Konsole:

Das Senden des Formulars wurde abgebrochen, da das Formular nicht verbunden ist

Der Code hinter dem Klick sieht so aus:

 this.handleExcelExporter = function(href, cols) {
   var form = $('<form method="post"><input type="submit" /><input type="hidden" name="layout" /></form>').attr('action', href);
   $('input[name="layout"]', form).val(JSON.stringify(cols));
   $('input[type="submit"]', form).click();
 }

Es scheint, dass Chrome 56 diese Art von Code nicht mehr unterstützt. Ist es nicht Wenn ja, meine Frage ist:

  1. Warum ist das plötzlich passiert? Ohne Abwertungswarnung?
  2. Was ist die Problemumgehung für diesen Code?
  3. Gibt es eine Möglichkeit, Chrome (oder andere Browser) wie zuvor zu arbeiten, ohne Code zu ändern? 

P.S. Es funktioniert auch nicht in der aktuellen Firefox-Version (ohne Nachricht). Es funktioniert auch nicht in IE 11.0 & Edge! (beide ohne Nachricht)

121
Mahmoud Moravej

Schnelle Antwort: Hängen Sie das Formular an den Körper an.

document.body.appendChild(form);

Oder, wenn Sie jQuery wie oben verwenden: $(document.body).append(form);

Details: Wenn das Formular gemäß den HTML-Standards nicht mit dem Browserkontext (Dokument) verknüpft ist, wird die Formularübermittlung abgebrochen.

HTML SPEC siehe 4.10.21.3.2

In Chrome 56 wurde diese Spezifikation angewendet.

Chrome Code Diff siehe @@ -347,9 +347,16 @@

S. über deine Frage # 1. Meiner Meinung nach führt die Übermittlung von Formularen im Gegensatz zu Ajax zum sofortigen Verschieben von Seiten.
Es ist also fast unmöglich, eine "veraltete Warnmeldung" anzuzeigen.
Ich halte es auch für inakzeptabel, dass diese gravierende Änderung nicht in der Liste der Funktionsänderungen enthalten ist. Chrome 56 Funktionen - www.chromestatus.com/features#milestone%3D56

167
KyungHun Jeon

wenn Sie diesen Fehler in React JS sehen, wenn Sie versuchen, das Formular durch Drücken der Eingabetaste zu senden, stellen Sie sicher, dass alle Schaltflächen im Formular, die das Formular nicht übermitteln, einen type="button" aufweisen. 

Wenn Sie nur eine button mit type="submit" haben und die Eingabetaste drücken, wird das Formular wie erwartet gesendet.

Verweise:
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-react-forms-multiple-taste/https: // github. de/Facebook/Reagieren/Ausgaben/2093

18
vaskort

Sie müssen sicherstellen, dass sich das Formular im Dokument befindet. Sie können das Formular an den Körper anhängen.

11
Liu Tao

Wie Sie sehen, verwenden Sie jQuery für die Formularinitialisierung.

Wenn ich die Antwort von @KyungHun Jeon versuche, funktioniert es für mich nicht, wenn auch jQuery verwendet wird.

Also habe ich versucht, das Formular mit dem jQuery-Verfahren an den Körper anzuhängen:

$(document.body).append(form);

Und es hat funktioniert!

8
Rizki Pratama

alternativ können Sie auch event.preventDefault (); in Ihrem handleSubmit (Ereignis) {

siehe https://facebook.github.io/react/docs/forms.html

6
joncode

Wenn Sie dies in React sehen, sollten Sie darauf achten, dass der <form> noch während der Übergabe im DOM gerendert werden muss. das wird fehlschlagen

{ this.state.submitting ? 
     <div>Form is being submitted</div> :
     <form onSubmit={()=>this.setState({submitting: true}) ...>
         <button ...>
     </form>
}

Wenn also das Formular gesendet wird, wird state.submitting gesetzt und die Meldung "Senden ..." anstelle des Formulars wiedergegeben, dann tritt dieser Fehler auf.

Durch das Verschieben des Formular-Tags außerhalb der Bedingung wurde sichergestellt, dass es bei Bedarf immer vorhanden war, d. H.

<form onSubmit={...} ...>
  { this.state.submitting ? 
     <div>Form is being submitted</div> :
     <button ...>
  }
</form>
2
Mike Ruhlin

Bei einer unserer Implementierung stand ich vor demselben Problem.

wir verwendeten jquery.forms.js. Dies ist ein Formular-Plugin und hier verfügbar. http://newsup.com/jquery/form/

wir haben die gleiche Antwort verwendet und eingefügt 

$(document.body).append(form);

und es hat funktioniert. Danke.

1
Abhinav Chawla

Abhängig von der Antwort von KyungHun Jeon, die appendChild erwartet jedoch einen dom-Knoten. Fügen Sie dem jquery-Objekt daher einen Index hinzu, um den Knoten zurückzugeben: document.body.appendChild(form[0])

1
moti irom

fügen Sie das Attribut type = "button" zum Button hinzu, auf den Sie klicken, und Sie sehen den Fehler. Es hat für mich funktioniert.

0
Tayyab Mehar

Sie können es auch lösen, indem Sie einen einzelnen Patch in der Datei jquery-x.x.x.js anwenden. Fügen Sie einfach nach "try {rp;} catch (m) {}" Zeile 1833 folgenden Code hinzu: 

if (r instanceof HTMLFormElement &&! r.parentNode) { r.style.display = "none"; document.body.append (r); r [p] (); }

Dadurch wird überprüft, ob ein Formular nicht Teil des Körpers ist, und fügt es hinzu.

0
Gaytan

Hinzufügen für die Nachwelt, da dies nicht auf Chrome bezogen ist, aber dies war der erste Thread, der bei der Suche nach diesem Formularübermittlungsfehler auf Google angezeigt wurde. 

In unserem Fall haben wir eine Funktion hinzugefügt, um die aktuelle div-HTML-Datei bei der Übergabe durch eine "Lade" -Animation zu ersetzen. Da sie vor dem Senden des Formulars stattfand, waren keine Formulare oder Daten mehr zu übermitteln. 

Ein offensichtlicher Fehler im Nachhinein, aber falls jemand hier landen sollte, könnte dies einige Zeit in der Zukunft sparen. 

0
Matt H