Fehler "Formularübermittlung abgebrochen, da das Formular nicht verbunden ist"

156

Ich habe eine alte Website mit JQuery 1.7, die bis vor zwei Tagen korrekt funktioniert. Plötzlich funktionieren einige meiner Schaltflächen nicht mehr und nachdem ich darauf geklickt habe, erhalte ich folgende Warnung in der Konsole:

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

Der Code hinter dem Klick lautet ungefähr so:

 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, ist meine Frage:

  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) dazu zu zwingen, wie zuvor zu funktionieren, ohne Code zu ändern?

PS Es funktioniert auch nicht in der neuesten Firefox-Version (ohne Meldung). Auch funktioniert es nicht in IE 11.0 & Edge! (beide ohne Nachricht)

Mahmoud Moravej
quelle
Ich habe der akzeptierten Antwort einen Fix hinzugefügt, der der Tatsache entspricht, dass form ein jQuery-Objekt ist. Beachten Sie, dass dies auch den jQuery- .submit()Handler betrifft (zusätzlich zu der .click()oben angegebenen Methode).
Ryanm

Antworten:

185

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: Gemäß den HTML-Standards wird die Formularübermittlung abgebrochen, wenn das Formular nicht dem Browserkontext (Dokument) zugeordnet ist.

HTML SPEC siehe 4.10.21.3.2

In Chrome 56 wurde diese Spezifikation angewendet.

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

PS zu deiner Frage # 1. Meiner Meinung nach bewirkt das Senden von Formularen im Gegensatz zu Ajax eine sofortige Seitenverschiebung.
Das Anzeigen einer "veralteten Warnmeldung" ist daher fast unmöglich.
Ich denke auch, dass es nicht akzeptabel ist, dass diese schwerwiegende Änderung nicht in der Liste der Funktionsänderungen enthalten ist. Chrome 56-Funktionen - www.chromestatus.com/features#milestone%3D56

KyungHun Jeon
quelle
4
Habe gerade diesen Fehler von einigen Benutzern gemeldet. Außerdem hatten einige andere Benutzer die aktualisierte Version nicht, sodass sie das Formular problemlos senden konnten. Den Fehler inkonsistenter machen. Danke für deine Antwort!
Ironicnet
Die vorgeschlagene Lösung hat bei mir in Kombination mit der Verwendung von jQuery nicht funktioniert, wie in der ursprünglichen Frage. Dies funktionierte stattdessen: $(document.body).append(form);
Chris
1
@ Chris Ich habe gerade die akzeptierte Antwort bearbeitet, da die Formularvariable ein jQuery-Objekt ist, nicht das eigentliche DOM-Formularelement. Bei der Verwendung form[0]wurde der Fehler "Fehler beim Ausführen von 'appendChild' auf 'Node': Parameter 1 ist nicht vom Typ 'Node'" ausgegeben. in Chrome. Wechseln Sie also einfach zu document.body.appendChild(form[0]).
Ryanm
@ryanm, ich bin nur ein Redakteur, da ich die folgende Zeile beigesteuert habe $(document.body).append(form);. Gerne können Sie Ihre Lösung zur akzeptierten Antwort hinzufügen, indem Sie sie bearbeiten oder @KyungHun Jeon fragen, ob er Ihre Lösung anstelle seiner übernehmen möchte.
Chris
@ Chris danke! Ich dachte, da die Frage in jQuery war, sollte die Antwort auch sein (kann verwirrend sein), aber meine Bearbeitung scheint abgelehnt worden zu sein. Nur eine Anmerkung dann für andere Passanten, dass es document.body.appendChild(form[0])(etwas schneller) ODER sein kann $(document.body).append(form).
Ryanm
49

Wenn dieser Fehler in React JS angezeigt wird, 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 senden, eine haben type="button".

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

Referenzen :
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/ https://github.com/facebook/react/issues/2093

vaskort
quelle
6
Auch eine Sache, auf die Sie in React achten sollten, <form>muss das DOM nach dem Klicken noch gerendert werden. dh dies wird fehlschlagen `{this.state.submission? <div> Formular wird gesendet </ div>: <form onSubmit = {() => this.setState ({submission: true}) ...> <button ...> </ form>} `Also wenn das Das Formular wird gesendet, state.submittingwird gesetzt und die Nachricht "Senden ..." wird anstelle des Formulars gerendert. Dann tritt dieser Fehler auf. Durch Verschieben des Formular-Tags außerhalb der Bedingung wurde sichergestellt, dass es bei Bedarf immer vorhanden war.
Mike Ruhlin
Gut zu wissen. Ich denke, Sie müssen nicht das ganze formElement in a ändern div. Ich glaube, wenn Sie nur den Inhalt des formElements ändern, anstatt das Element zu ersetzen, wird es wie erwartet funktionieren.
Vaskort
Also, wie Max Williams sagte, ist es eine Rennbedingung - der Browser prüft, ob das Formular vorhanden ist, aber das Formular ist bereits weg.
PianoJames
PreventDefault () verursacht diese Warnung von Chrome
Imbatman
12

füge attribute type = "button" zu der Schaltfläche hinzu, auf die du klickst. Du siehst den Fehler. Es hat bei mir funktioniert.

Tayyab Mehar
quelle
Funktioniert gut für mich: Daumen hoch:
Cederlof
11

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

Liu Tao
quelle
7
Ich hatte dies und es stellte sich heraus, dass der Schaltfläche zum Senden eines Remote-Formulars ein Klick hinzugefügt wurde, der das enthaltende Element des Formulars entfernte. Es gab also im Grunde eine Racebedingung zwischen dem eingereichten Formular und dem entfernten Formular.
Max Williams
4
Vielen Dank an @Max Williams, Ihr Kommentar hat mich mehr auf den richtigen Weg gebracht als die akzeptierte Antwort.
JirkaV
11

Alternativ können Sie event.preventDefault () einschließen. in Ihrem handleSubmit (Ereignis) {

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

Joncode
quelle
2
Links zu externen Ressourcen werden empfohlen. Fügen Sie jedoch einen Kontext um den Link hinzu, damit Ihre Mitbenutzer eine Vorstellung davon haben, was es ist und warum es dort ist. Zitieren Sie immer den relevantesten Teil eines wichtigen Links, falls die Zielwebsite nicht erreichbar ist oder dauerhaft offline geht. Sehen Sie, wie man eine gute Antwort schreibt
Peter Reid
Mit àntdFormen. Das hat geholfen.
Eduard
8

Ich sehe, dass Sie jQuery für die Formularinitialisierung verwenden.

Wenn ich die Antwort von @KyungHun Jeon versuche, funktioniert es bei mir nicht, wenn ich auch jQuery verwende.

Also habe ich versucht, das Formular mithilfe der jQuery-Methode an den Text anzuhängen:

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

Und es hat funktioniert!

Rizki Pratama
quelle
6

Eine Sache, auf die Sie achten müssen, wenn Sie dies in React sehen, ist, dass das <form>noch im DOM gerendert werden muss, während es gesendet wird. dh dies wird fehlschlagen

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

Wenn also das Formular state.submittinggesendet wird, festgelegt wird und die Nachricht "Senden ..." anstelle des Formulars gerendert wird, tritt dieser Fehler auf.

Durch 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>
Mike Ruhlin
quelle
Rennbedingungen!
PianoJames
2

Ich war in einer unserer Implementierungen mit demselben Problem konfrontiert.

Wir haben jquery.forms.js verwendet. Das ist ein Formular-Plugin und hier verfügbar.http://malsup.com/jquery/form/

Wir haben die gleiche Antwort wie oben angegeben und eingefügt

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

und es hat funktioniert. Danke.

Abhinav Chawla
quelle
1

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

moti irom
quelle
2
Du meinst document.body.appendChild(form[0])?
Efeder
1

Hinzufügen für die Nachwelt, da dies nicht mit Chrom zusammenhängt, aber dies war der erste Thread, der bei der Suche nach diesem Formularübermittlungsfehler bei Google angezeigt wurde.

In unserem Fall haben wir eine Funktion angehängt, um das aktuelle div-HTML beim Senden durch eine "Laden" -Animation zu ersetzen. Da diese vor dem Absenden des Formulars auftrat, waren keine Formulare oder Daten mehr zu senden.

Rückblickend ein sehr offensichtlicher Fehler, aber falls jemand hier landet, kann dies in Zukunft einige Zeit sparen.

Matt H.
quelle
1

Ich habe diesen Fehler in react.js erhalten. Wenn Sie eine Schaltfläche im Formular haben, die sich wie eine Schaltfläche verhalten soll, und das Formular nicht senden möchten, müssen Sie den Typ = "Schaltfläche" angeben. Andernfalls wird versucht, das Formular zu senden. Ich glaube, Vaskort hat dies mit einer Dokumentation beantwortet, die Sie überprüfen können.

Jesaja Larsen
quelle
Es ist eine Warnung: Das Senden des Formulars wurde abgebrochen, da das Formular nicht verbunden ist. Tut mir leid, dass ich vergessen habe, das hinzuzufügen.
Jesaja Larsen
1
Ich kann das bestätigen. Ich erhielt die gleiche Warnung in "Reagieren", Form submission canceled because the form is not connectedwenn ich die Schaltfläche "Abbrechen" meines Formulars drückte. Nach dem Hinzufügen type="button"zu meiner Schaltfläche "Abbrechen" erhalte ich keine Warnung mehr. Vielen Dank!
Ben
1

Ich konnte die Nachricht entfernen, indem ich dem Schaltflächenelement in vue das Attribut type = "button" hinzufügte.

Pasham Akhil Kumar Reddy
quelle
0

Sie können es auch lösen, indem Sie einen einzelnen Patch in den jquery-xxxjs anwenden, indem Sie nach "try {rp;} catch (m) {}" Zeile 1833 diesen Code hinzufügen:

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

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

Gaytan
quelle
-1

Ich habe diese Nachricht mit Angular gesehen, also habe ich method = "post" und action = "" herausgenommen und die Warnung war weg.

Heavyyrick
quelle