Hata Alma “Form bağlı olmadığı için form gönderimi iptal edildi”

İki gün öncesine kadar doğru çalışan JQuery 1.7 ile eski bir web sitem var. Birden düğmelerim artık çalışmıyor ve üzerlerine tıkladıktan sonra konsolda şu uyarıyı alıyorum:

Form bağlı olmadığı için form gönderimi iptal edildi

Tıklamanın arkasındaki kod şuna benzer:

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

Görünüşe göre Chrome 56 bu tür kodları desteklemiyor. Öyle değil mi? Evet ise sorum şu:

1. Bu neden aniden oldu? Kullanımdan kaldırma uyarısı olmadan?
2. Bu kod için geçici çözüm nedir?
3. Herhangi bir kodu değiştirmeden krom (veya diğer tarayıcıları) daha önce olduğu gibi çalışmaya zorlamanın bir yolu var mı?

PS En son firefox sürümünde de (mesajsız) çalışmaz. Ayrıca IE 11.0 & Edge'de çalışmıyor! (her ikisi de mesajsız)

Hızlı cevap: formu vücuda ekleyin.

document.body.appendChild(form);

Veya yukarıdaki gibi jQuery kullanıyorsanız: $(document.body).append(form);

Ayrıntılar: HTML standartlarına göre, form göz atma bağlamıyla (belge) ilişkili değilse, form gönderme işlemi iptal edilir.

HTML SPEC bkz. 4.10.21.3.2

Chrome 56'da bu spesifikasyon uygulandı.

Chrome kodu farkı bkz. @@ -347,9 +347,16 @@

PS, soru # 1 hakkında. Benim düşünceme göre, ajax'ın aksine, form gönderme anında sayfa hareketine neden olur.
Dolayısıyla, 'kullanımdan kaldırılmış uyarı mesajı' göstermek neredeyse imkansızdır.
Ayrıca, bu ciddi değişikliğin özellik değişiklik listesinde yer almasının kabul edilemez olduğunu düşünüyorum. Chrome 56 özellikleri - www.chromestatus.com/features#milestone%3D56

formu enter tuşuna basarak göndermeye çalıştığınızda React JS'de bu hatayı görüyorsanız, formu göndermeyen tüm düğmelerinizde a işareti bulunduğundan emin olun type="button".

Yalnızca bir varsa buttonile type="submit"beklendiği gibi formu gönderecektir Enter tuşuna basarak.

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

özniteliği türünü ekleyin = "düğme" hatayı kimin tıkladığını görürsünüz, benim için çalıştı.

Formun belgede olduğundan emin olmalısınız. Formu gövdeye ekleyebilirsiniz.

alternatif olarak event.preventDefault (); sapındaSubmit (etkinlik) {

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

Form başlatma için jQuery kullandığınızı görüyorum.

@KyungHun Jeon'un cevabını denediğimde, jQuery kullanan da benim için çalışmıyor.

Böylece, jQuery yolunu kullanarak formu vücuda eklemeyi denedim:

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

Ve işe yaradı!

Bunu React'te görürseniz dikkat etmeniz gereken bir şey, <form>gönderirken DOM'da hala işlemek zorunda olmasıdır. yani, bu başarısız olacak

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

Yani form gönderildiğinde, state.submitting ayarlanır ve form yerine "gönderiliyor ..." iletisi görüntülenirse, bu hata oluşur.

Form etiketini koşullu olarak taşımak, gerektiğinde her zaman orada olmasını sağladı, yani

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

Uygulamamızın birinde de aynı sorunla karşılaştım.

jquery.forms.js kullanıyorduk. Bu bir form eklentisidir ve burada mevcuttur. http://malsup.com/jquery/form/

Yukarıda verilen aynı cevabı kullandık ve yapıştırdık

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

ve işe yaradı.

KyungHun Jeon'un cevabına bağlı olarak, ancak appendChild bir dom düğümü bekliyor, bu nedenle düğümü döndürmek için jquery nesnesine bir dizin ekleyin: document.body.appendChild(form[0])

Bu, kromla ilgili olmadığından gelecek kuşaklar için ekleme yapmak, ancak bu form gönderme hatasını ararken Google'da gösterilen ilk iş parçacığıydı.

Bizim durumumuzda, mevcut div html'yi gönderimde "yükleme" animasyonu ile değiştirmek için bir işlev ekledik - form gönderilmeden önce gerçekleştiği için artık gönderilecek herhangi bir form veya veri yoktu.

Geçmişe bakıldığında çok bariz bir hata var, ancak burada kimse biterse gelecekte biraz zaman kazanabilir.

Bu hatayı reakt.js'de aldım. Formda düğme gibi davranmasını istediğiniz ve düğmeyi göndermediğiniz bir düğmeniz varsa, ona type = "button" vermelisiniz. Aksi takdirde formu göndermeye çalışır. Vaskort'un bunu kontrol edebileceğiniz bazı belgelerle yanıtladığını düşünüyorum.

Vue düğme öğesine öznitelik type = "button" ekleyerek iletiden kurtulmak mümkün.

Ayrıca, jquery-xxxjs içine tek bir düzeltme eki uygulayarak çözebilirsiniz, sadece "try {rp;} catch (m) {}" satır 1833'ten sonra bu kodu ekleyin:

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

Bu, bir form vücudun bir parçası olmadığında doğrular ve ekler.

HTML kodumun <body>etiketi olmadığından bu hatayı aldığımı fark ettim .

A olmadan <body>, document.body.appendChild(form);ifadenin eklenecek bir gövde nesnesi olmadığında.

Açısal kullanarak bu mesajı gördüm, bu yüzden sadece method = "post" ve action = "" çıktım ve uyarı gitti.