Pojawia się błąd „Przesłanie formularza zostało anulowane, ponieważ formularz nie jest połączony”

Mam starą stronę internetową z JQuery 1.7, która działa poprawnie jeszcze dwa dni temu. Nagle część moich przycisków już nie działa i po ich kliknięciu w konsoli pojawia się takie ostrzeżenie:

Przesłanie formularza zostało anulowane, ponieważ formularz nie jest połączony

Kod kliknięcia wygląda mniej więcej tak:

 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();
 }

Wygląda na to, że Chrome 56 nie obsługuje już tego rodzaju kodu. Prawda? Jeśli tak, moje pytanie brzmi:

1. Dlaczego stało się to nagle? Bez żadnego ostrzeżenia o wycofaniu?
2. Jakie jest obejście tego kodu?
3. Czy istnieje sposób, aby zmusić Chrome (lub inne przeglądarki) do działania tak jak wcześniej, bez zmiany kodu?

PS To również nie działa w najnowszej wersji przeglądarki Firefox (bez żadnego komunikatu). Nie działa również w IE 11.0 i Edge! (oba bez żadnej wiadomości)

Szybka odpowiedź: dołącz formularz do treści.

document.body.appendChild(form);

Lub, jeśli używasz jQuery jak powyżej: $(document.body).append(form);

Szczegóły: Zgodnie ze standardami HTML, jeśli formularz nie jest powiązany z kontekstem przeglądania (dokumentem), przesyłanie formularza zostanie przerwane.

HTML SPEC, patrz 4.10.21.3.2

W Chrome 56 ta specyfikacja została zastosowana.

Różnica w kodzie Chrome patrz @@ -347,9 +347,16 @@

PS odnośnie twojego pytania nr 1. Moim zdaniem, w przeciwieństwie do Ajaxa, przesłanie formularza powoduje natychmiastowe przesunięcie strony.
Dlatego wyświetlenie „przestarzałego komunikatu ostrzegawczego” jest prawie niemożliwe.
Uważam też, że niedopuszczalne jest, aby ta poważna zmiana nie została uwzględniona na liście zmian funkcji. Funkcje Chrome 56 - www.chromestatus.com/features#milestone%3D56

Jeśli widzisz ten błąd w React JS, gdy próbujesz przesłać formularz, naciskając klawisz Enter, upewnij się, że wszystkie przyciski w formularzu, które nie wysyłają formularza, mają rozszerzenie type="button".

Jeśli masz tylko jeden buttonz type="submit"naciśnięciem klawisza Enter, wyśle ​​formularz zgodnie z oczekiwaniami.

Źródła :
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/ https://github.com/facebook/react/issues/2093

dodaj atrybut type = "button" do przycisku na kto kliknie, widzisz błąd, zadziałało dla mnie.

Musisz upewnić się, że formularz znajduje się w dokumencie. Możesz dołączyć formularz do treści.

alternatywnie dołącz event.preventDefault (); in your handleSubmit (event) {

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

Widzę, że używasz jQuery do inicjalizacji formularza.

Kiedy próbuję odpowiedzieć @KyungHun Jeon, nie działa to również dla mnie, gdy używam jQuery.

Próbowałem więc dołączyć formularz do treści przy użyciu metody jQuery:

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

I zadziałało!

Warto zwrócić uwagę, jeśli zobaczysz to w Reakcie, jest to, że <form>nadal musi renderować się w DOM podczas przesyłania. tj. to się nie powiedzie

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

Więc kiedy formularz jest przesyłany, state.submittingzostaje ustawiony, a komunikat „przesyłanie ...” renderuje się zamiast formularza, pojawia się ten błąd.

Przeniesienie tagu formularza poza warunek zapewniło, że był tam zawsze, gdy był potrzebny, tj

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

Z tym samym problemem spotkałem się w jednej z naszych realizacji.

używaliśmy jquery.forms.js. która jest wtyczką formularzy i jest dostępna tutaj. http://malsup.com/jquery/form/

użyliśmy tej samej odpowiedzi podanej powyżej i wkleiliśmy

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

i zadziałało. dzięki.

W zależności od odpowiedzi od KyungHun Jeon, ale appendChild oczekuje węzła dom, więc dodaj indeks do obiektu jquery, aby zwrócić węzeł: document.body.appendChild(form[0])

Dodawanie dla potomnych, ponieważ nie jest to związane z Chrome, ale był to pierwszy wątek, który pojawił się w Google podczas wyszukiwania tego błędu przesyłania formularza.

W naszym przypadku dołączyliśmy funkcję zastępującą obecny kod div html animacją „wczytywania” podczas przesyłania - ponieważ miało to miejsce przed przesłaniem formularza, nie było już formularza ani danych do przesłania.

Bardzo oczywisty błąd z perspektywy czasu, ale gdyby ktoś tu trafił, może zaoszczędzić mu trochę czasu w przyszłości.

Otrzymałem ten błąd w respond.js. Jeśli masz przycisk w formularzu, który chcesz zachowywać się jak przycisk i nie wysyłasz formularza, musisz podać mu type = "button". W przeciwnym razie spróbuje wysłać formularz. Wydaje mi się, że Vaskort odpowiedział na to, przedstawiając dokumentację, którą możesz sprawdzić.

Mogłem pozbyć się tego komunikatu, dodając atrybut type = "button" do elementu button w vue.

Możesz również rozwiązać ten problem, stosując pojedynczą poprawkę w jquery-xxxjs, po prostu dodaj po wierszu „try {rp;} catch (m) {}” 1833 ten kod:

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

To sprawdza, kiedy formularz nie jest częścią treści i dodaje go.

Widziałem tę wiadomość przy użyciu angular, więc po prostu usunąłem metody method = "post" i action = "", a ostrzeżenie zniknęło.