Mendapatkan Kesalahan “Pengiriman formulir dibatalkan karena formulir tidak terhubung”

Saya memiliki situs web lama dengan JQuery 1.7 yang berfungsi dengan benar hingga dua hari yang lalu. Tiba-tiba beberapa tombol saya tidak berfungsi lagi dan, setelah mengkliknya, saya mendapatkan peringatan ini di konsol:

Pengiriman formulir dibatalkan karena formulir tidak terhubung

Kode di belakang klik adalah sesuatu seperti ini:

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

Tampaknya Chrome 56 tidak mendukung kode semacam ini lagi. Bukan? Jika ya pertanyaan saya adalah:

1. Kenapa ini terjadi tiba-tiba? Tanpa peringatan penghinaan?
2. Apa solusinya untuk kode ini?
3. Apakah ada cara untuk memaksa chrome (atau browser lain) bekerja seperti sebelumnya tanpa mengubah kode apa pun?

PS Tidak berfungsi di versi firefox terbaru (tanpa pesan apa pun). Juga tidak berfungsi di IE 11.0 & Edge! (keduanya tanpa pesan apa pun)

Jawaban cepat: tambahkan formulir ke badan.

document.body.appendChild(form);

Atau, jika Anda menggunakan jQuery seperti di atas: $(document.body).append(form);

Detail: Menurut standar HTML, jika formulir tidak terkait dengan konteks penelusuran (dokumen), pengiriman formulir akan dibatalkan.

HTML SPEC lihat 4.10.21.3.2

Di Chrome 56, spesifikasi ini diterapkan.

Perbedaan kode Chrome lihat @@ -347,9 +347,16 @@

PS tentang pertanyaan Anda # 1. Menurut pendapat saya, tidak seperti ajax, pengiriman formulir menyebabkan pemindahan halaman instan.
Jadi, menampilkan 'pesan peringatan yang sudah usang' hampir tidak mungkin.
Saya juga berpikir itu tidak dapat diterima bahwa perubahan serius ini tidak termasuk dalam daftar perubahan fitur. Fitur Chrome 56 - www.chromestatus.com/features#milestone%3D56

jika Anda melihat kesalahan ini di Bereaksi JS ketika Anda mencoba mengirimkan formulir dengan menekan enter, pastikan semua tombol Anda di formulir yang tidak mengirimkan formulir memiliki a type="button".

Jika Anda hanya memiliki satu buttondengan type="submit"menekan Enter akan mengirimkan formulir seperti yang diharapkan.

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

tambahkan type type = "button" ke tombol pada siapa yang mengklik Anda melihat kesalahan, itu bekerja untuk saya.

Anda harus memastikan bahwa formulir ada di dokumen. Anda dapat menambahkan formulir ke tubuh.

alternatifnya termasuk event.preventDefault (); di handleSubmit (acara) Anda {

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

Saya melihat Anda menggunakan jQuery untuk inisialisasi formulir.

Ketika saya mencoba jawaban @KyungHun Jeon, itu tidak berhasil bagi saya yang menggunakan jQuery juga.

Jadi, saya mencoba menambahkan formulir ke tubuh dengan menggunakan cara jQuery:

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

Dan itu berhasil!

Suatu hal yang perlu diwaspadai jika Anda melihat ini di Bereaksi, adalah bahwa <form>masih harus membuat di DOM saat mengirimkan. yaitu, ini akan gagal

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

Jadi ketika formulir dikirimkan, state.submittingdiatur dan pesan "yang mengirimkan ..." menjadikan alih-alih formulir, maka kesalahan ini terjadi.

Memindahkan tag formulir di luar persyaratan memastikan bahwa selalu ada ketika diperlukan, yaitu

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

Saya menghadapi masalah yang sama di salah satu implementasi kami.

kami menggunakan jquery.forms.js. yang merupakan plugin formulir dan tersedia di sini. http://malsup.com/jquery/form/

kami menggunakan jawaban yang sama yang diberikan di atas dan ditempelkan

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

dan itu berhasil. Terima kasih.

Bergantung pada jawaban dari KyungHun Jeon, tetapi appendChild mengharapkan dom dom, jadi tambahkan indeks ke objek jquery untuk mengembalikan simpul: document.body.appendChild(form[0])

Menambahkan untuk anak cucu karena ini tidak terkait dengan krom tetapi ini adalah utas pertama yang muncul di google saat mencari kesalahan pengiriman formulir ini.

Dalam kasus kami, kami melampirkan fungsi untuk mengganti div html saat ini dengan animasi "memuat" saat pengiriman - karena itu terjadi sebelum formulir dikirimkan, tidak ada lagi formulir atau data yang harus dikirim.

Kesalahan yang sangat jelas dalam retrospeksi tetapi jika ada orang yang berakhir di sini mungkin menghemat waktu di masa depan.

Saya telah menerima kesalahan ini di react.js. Jika Anda memiliki tombol dalam bentuk yang Anda ingin bertindak seperti tombol dan tidak mengirimkan formulir, Anda harus memberikannya ketik = "tombol". Kalau tidak, ia mencoba mengirimkan formulir. Saya percaya vaskort menjawab ini dengan beberapa dokumentasi yang dapat Anda periksa.

Saya dapat menyingkirkan pesan dengan menambahkan atribut type = "button" ke elemen tombol di vue.

Anda juga dapat menyelesaikannya, dengan menerapkan satu tambalan di jquery-xxxjs setelah menambahkan "coba {rp;} catch (m) {}" baris 1833 kode ini:

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

Ini memvalidasi ketika formulir bukan bagian dari tubuh dan menambahkannya.

Saya perhatikan bahwa saya mendapatkan kesalahan ini, karena kode HTML saya tidak memiliki <body>tag.

Tanpa a <body>, ketika document.body.appendChild(form);pernyataan tidak memiliki objek tubuh untuk ditambahkan.

Saya melihat pesan ini menggunakan sudut, jadi saya hanya mengambil metode = "posting" dan tindakan = "" keluar, dan peringatan itu hilang.