ได้รับข้อผิดพลาด“ การส่งแบบฟอร์มถูกยกเลิกเนื่องจากไม่ได้เชื่อมต่อแบบฟอร์ม”

ฉันมีเว็บไซต์เก่าที่มี JQuery 1.7 ซึ่งทำงานได้อย่างถูกต้องจนถึงสองวันที่ผ่านมา ทันใดนั้นปุ่มบางปุ่มของฉันไม่ทำงานอีกต่อไปและหลังจากคลิกปุ่มเหล่านี้ฉันได้รับคำเตือนนี้ในคอนโซล:

การส่งแบบฟอร์มถูกยกเลิกเนื่องจากไม่ได้เชื่อมต่อแบบฟอร์ม

โค้ดที่อยู่หลังการคลิกนั้นเป็นดังนี้:

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

ดูเหมือนว่า Chrome 56 จะไม่สนับสนุนรหัสประเภทนี้อีกต่อไป ไม่ใช่เหรอ ถ้าใช่คำถามของฉันคือ:

1. ทำไมสิ่งนี้จึงเกิดขึ้นโดยฉับพลัน? ไม่มีคำเตือนการเลิกใช้งานหรือไม่
2. วิธีแก้ไขสำหรับรหัสนี้คืออะไร
3. มีวิธีบังคับให้ chrome (หรือเบราว์เซอร์อื่น ๆ ) ทำงานเหมือนก่อนโดยไม่ต้องเปลี่ยนรหัสหรือไม่?

ป.ล. มันไม่ทำงานใน firefox รุ่นล่าสุดเช่นกัน (ไม่มีข้อความ) นอกจากนี้มันไม่ทำงานใน IE 11.0 & Edge! (ทั้งสองโดยไม่มีข้อความใด ๆ )

คำตอบด่วน: ต่อท้ายแบบฟอร์มต่อร่างกาย

document.body.appendChild(form);

หรือหากคุณใช้ jQuery ดังกล่าว: $(document.body).append(form);

รายละเอียด: ตามมาตรฐาน HTML หากแบบฟอร์มไม่เกี่ยวข้องกับบริบทการสืบค้น (เอกสาร) การส่งแบบฟอร์มจะถูกยกเลิก

HTML SPECดู 4.10.21.3.2

ใน Chrome 56 ข้อกำหนดนี้ถูกนำไปใช้

รหัส Chrome แตกต่างกันไปที่ @@ -347,9 +347,16 @@

ป.ล. เกี่ยวกับคำถาม # 1 ของคุณ ในความคิดของฉันไม่เหมือนอาแจ็กซ์การส่งแบบฟอร์มทำให้เกิดการย้ายหน้าทันที
ดังนั้นการแสดง 'ข้อความเตือนที่เลิกใช้งานแล้ว' จึงเป็นไปไม่ได้
ฉันยังคิดว่าไม่สามารถยอมรับได้ว่าการเปลี่ยนแปลงที่ร้ายแรงนี้ไม่รวมอยู่ในรายการการเปลี่ยนแปลงคุณสมบัติ คุณลักษณะของ Chrome 56 - www.chromestatus.com/features#milestone%3D56

ถ้าคุณจะเห็นข้อผิดพลาดในการตอบสนอง JS type="button"เมื่อคุณพยายามที่จะส่งแบบฟอร์มโดยการกดป้อนให้แน่ใจว่าทั้งหมดปุ่มของคุณในรูปแบบที่ไม่ได้ส่งแบบฟอร์มมี

หากคุณมีเพียงคนเดียวที่buttonมีtype="submit"การกด Enter จะส่งแบบฟอร์มตามที่คาดไว้

ข้อมูลอ้างอิง :
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/ https://github.com/facebook/react/issues/2093

เพิ่ม attribute type = "button"ไปที่ปุ่มบนว่าใครคลิกคุณเห็นข้อผิดพลาดมันใช้งานได้สำหรับฉัน

คุณต้องทำให้แน่ใจว่าแบบฟอร์มนั้นอยู่ในเอกสาร คุณสามารถเพิ่มแบบฟอร์มต่อท้ายเนื้อหา

หรือรวมถึง event.preventDefault (); ใน handleSubmit ของคุณ (เหตุการณ์) {

ดูhttps://facebook.github.io/react/docs/forms.html

ฉันเห็นว่าคุณกำลังใช้ jQuery สำหรับการเริ่มต้นแบบฟอร์ม

เมื่อฉันลองตอบ @KyungHun Jeon มันก็ไม่ได้ผลสำหรับฉันที่ใช้ jQuery ด้วย

ดังนั้นฉันพยายามต่อท้ายแบบฟอร์มกับเนื้อหาโดยใช้วิธี jQuery:

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

และมันก็ใช้งานได้!

สิ่งที่ต้องระวังหากคุณเห็นสิ่งนี้ใน React คือ<form>ยังต้องแสดงใน DOM ขณะที่ส่ง นั่นคือสิ่งนี้จะล้มเหลว

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

ดังนั้นเมื่อส่งแบบฟอร์มให้state.submittingตั้งค่าและข้อความ "กำลังส่ง ... " วาทกรรมแทนแบบฟอร์มดังนั้นข้อผิดพลาดนี้จะเกิดขึ้น

การย้ายแท็กฟอร์มภายนอกเงื่อนไขทำให้มั่นใจได้ว่ามันจะอยู่ที่นั่นเสมอเมื่อจำเป็นเช่น

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

ฉันประสบปัญหาเดียวกันในการดำเนินการอย่างใดอย่างหนึ่งของเรา

เราใช้ jquery.forms.js ซึ่งเป็นปลั๊กอินของฟอร์มและมีให้ที่นี่ http://malsup.com/jquery/form/

เราใช้คำตอบเดียวกันที่ให้ไว้ข้างต้นและวาง

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

และมันก็ใช้ได้ดีขอบคุณ

ขึ้นอยู่กับคำตอบจาก KyungHun Jeon แต่ appendChild คาดหวังว่าโหนด dom ดังนั้นเพิ่มดัชนีไปยังวัตถุ jquery เพื่อส่งกลับโหนด: document.body.appendChild(form[0])

การเพิ่มสำหรับลูกหลานเนื่องจากไม่ได้เกี่ยวข้องกับโครม แต่เป็นกระทู้แรกที่ปรากฏบน Google เมื่อค้นหาข้อผิดพลาดในการส่งแบบฟอร์มนี้

ในกรณีของเราเราแนบฟังก์ชันเพื่อแทนที่ div html ปัจจุบันด้วยภาพเคลื่อนไหว "loading" เมื่อส่ง - เนื่องจากมันเกิดขึ้นก่อนที่จะส่งแบบฟอร์มนั้นไม่มีรูปแบบหรือข้อมูลใด ๆ ที่จะส่งอีกต่อไป

ข้อผิดพลาดที่ชัดเจนมากในการหวนกลับ แต่ในกรณีที่ทุกคนลงเอยที่นี่อาจช่วยพวกเขาในอนาคต

ฉันได้รับข้อผิดพลาดนี้ใน react.js หากคุณมีปุ่มในแบบฟอร์มที่คุณต้องการทำตัวเหมือนปุ่มและไม่ส่งแบบฟอร์มคุณจะต้องให้ type = "button" มิฉะนั้นจะพยายามส่งแบบฟอร์ม ฉันเชื่อว่า vaskort ตอบคำถามนี้พร้อมเอกสารบางอย่างที่คุณสามารถตรวจสอบได้

ฉันสามารถกำจัดข้อความโดยใช้การเพิ่ม attribute type = "button" ในองค์ประกอบปุ่มใน vue

คุณสามารถแก้ไขได้โดยใช้โปรแกรมปะแก้เพียงอันเดียวใน jquery-xxxjs เพียงเพิ่มหลังจาก "ลอง {rp;} catch (m) {}" บรรทัด 1833 โค้ดนี้:

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

สิ่งนี้จะตรวจสอบเมื่อฟอร์มไม่ได้เป็นส่วนหนึ่งของร่างกายและเพิ่มฟอร์มนั้น

ฉันสังเกตเห็นว่าฉันได้รับข้อผิดพลาดนี้เนื่องจากรหัส HTML ของฉันไม่มี<body>แท็ก

หากไม่มีคำสั่งa <body>เมื่อไม่มีdocument.body.appendChild(form);คำสั่ง body body ให้ต่อท้าย

ฉันเห็นข้อความนี้ใช้มุมดังนั้นฉันเพิ่งใช้วิธี = "โพสต์" และการกระทำ = "" ออกและคำเตือนหายไป