Fehler "Formularübermittlung 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 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)

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

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

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

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

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

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

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!

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>

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.

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])

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.

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.

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

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.

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