"प्रपत्र सबमिट नहीं होने के कारण त्रुटि सबमिट करना" रद्द करना

Question

मेरे पास 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. क्या किसी भी कोड को बदले बिना क्रोम (या अन्य ब्राउज़र) को पहले की तरह काम करने के लिए मजबूर करने का एक तरीका है?

PS यह नवीनतम फ़ायरफ़ॉक्स संस्करण में (या बिना किसी संदेश के) काम नहीं करता है। इसके अलावा यह IE 11.0 और एज में काम नहीं करता है! (दोनों बिना किसी संदेश के)

Comments

मैंने इस तथ्य से मेल खाने के लिए स्वीकार किए गए उत्तर में एक फिक्स जोड़ा कि फॉर्म एक jQuery ऑब्जेक्ट है। ध्यान दें कि यह jQuery के .submit()हैंडलर को भी प्रभावित करता है ( .click()ऊपर बताई गई विधि के अलावा )।

— रैनसम

Answer 1

त्वरित उत्तर: शरीर को प्रपत्र संलग्न करें।

document.body.appendChild(form);

या, यदि आप ऊपर के रूप में jQuery का उपयोग कर रहे हैं: $(document.body).append(form);

विवरण: HTML मानकों के अनुसार, यदि फ़ॉर्म ब्राउज़िंग संदर्भ (दस्तावेज़) से जुड़ा नहीं है, तो फ़ॉर्म सबमिट किया जाएगा।

HTML विनिर्देश देखें 4.10.21.3.2

Chrome 56 में, यह कल्पना लागू की गई थी।

Chrome कोड में @@ -347,9 +347,16 @@ देखें

अपने प्रश्न # 1 के बारे में पुनश्च। मेरी राय में, अजाक्स के विपरीत, फॉर्म सबमिशन का कारण तत्काल पृष्ठ चाल है।
इसलिए, 'डिप्रेस्ड चेतावनी संदेश' दिखाना लगभग असंभव है।
मुझे यह भी लगता है कि यह अस्वीकार्य है कि यह गंभीर परिवर्तन सुविधा परिवर्तन सूची में शामिल नहीं है। क्रोम 56 विशेषताएं - www.chromestatus.com/features#milestone%3D56

Comments

बस इस बग को कुछ उपयोगकर्ताओं द्वारा रिपोर्ट किया गया था। इसके अलावा, कुछ अन्य उपयोगकर्ताओं के पास उन्नत संस्करण नहीं था, इसलिए वे समस्याओं के बिना फॉर्म जमा कर सकते थे। बग को और अधिक असंगत बना रहा है। आपके उत्तर के लिए धन्यवाद!

— विडंबना

मूल प्रश्न के अनुसार प्रस्तावित समाधान jQuery के उपयोग के संयोजन में मेरे लिए काम नहीं किया। इसके बजाय काम किया: $(document.body).append(form);

— क्रिस

@ क्रिस ने सिर्फ स्वीकृत उत्तर को संपादित किया, क्योंकि फॉर्म चर एक jQuery ऑब्जेक्ट है, वास्तविक डोम फॉर्म तत्व नहीं। जैसा कि यह प्रयोग कर रहा था form[0], यह "Node" पर 'appendChild' को क्रियान्वित करने में एक त्रुटि उत्पन्न करेगा: पैरामीटर 1 प्रकार 'Node' का नहीं है। " क्रोम में। इस प्रकार, बस करने के लिए बदल जाते हैं document.body.appendChild(form[0])।

— रैनसम

@ आर्यनम, मैं सिर्फ एक संपादक हूं क्योंकि मैंने निम्नलिखित पंक्ति में योगदान दिया है $(document.body).append(form);। आपका स्वागत है कि आप अपने समाधान को स्वीकार किए गए उत्तर में जोड़कर या @KyungHun Jeon से पूछ सकते हैं कि क्या वह उसके बजाय आपके समाधान को अपनाना चाहता है।

— क्रिस

@ क्रिस धन्यवाद! मुझे लगा कि प्रश्न jQuery में था, उत्तर भी होना चाहिए (भ्रामक हो सकता है), लेकिन मेरा संपादन ऐसा लगता है जैसे इसे अस्वीकार कर दिया गया था। बस एक नोट तब अन्य राहगीरों के लिए यह document.body.appendChild(form[0])(थोड़ा तेज) या हो सकता है $(document.body).append(form)।

— राणीम

Answer 2

यदि आप रिएक्ट JS में यह त्रुटि देख रहे हैं जब आप एंटर दबाकर फॉर्म सबमिट करने का प्रयास करते हैं, तो सुनिश्चित करें कि फॉर्म में आपके सभी बटन फॉर्म को सबमिट नहीं करते हैं type="button"।

यदि आपके पास केवल एक है buttonजिसमें type="submit"एंटर दबाया गया है, तो आप उम्मीद के मुताबिक फॉर्म जमा करेंगे।

संदर्भ :
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/ https://github.com/facebook/react/issues/2093

Comments

यह भी प्रतिक्रिया में देखने के लिए एक बात है, <form>अभी भी इसे क्लिक करने के बाद DOM में रेंडर करना है। यानी, यह विफल हो जाएगा {{this.state.submitting? <div> फ़ॉर्म सबमिट किया जा रहा है </ div>: <form onSubmit = {() => this.setState ({सबमिट करना: true}) ...> <बटन ...> </ form>} `so so when फ़ॉर्म सबमिट किया state.submittingजाता है , सेट हो जाता है और "सबमिट ..." संदेश फ़ॉर्म के बजाय प्रस्तुत करता है, फिर यह त्रुटि होती है। सशर्त के बाहर प्रपत्र टैग को ले जाना सुनिश्चित करता है कि यह हमेशा जरूरत पड़ने पर वहाँ था।

— माइक रूहलिन

जानकर अच्छा लगा। मुझे लगता है कि आपको पूरे formतत्व को a में बदलना नहीं है div। मेरा मानना ​​है कि यदि आप formतत्व को प्रतिस्थापित करने के बजाय इसकी सामग्री को बदलते हैं तो यह अपेक्षा के अनुरूप काम करेगा।

— वास्कॉर्ट

तो, जैसे कि मैक्स विलियम्स ने कहा, यह एक दौड़ की स्थिति है - ब्राउज़र जाँच कर रहा है कि क्या फॉर्म है, लेकिन फॉर्म पहले ही चला गया है।

— पियानोजैम

stopDefault () Chrome से इस अलर्ट का कारण बनता है

— imbatman

पहला लिंक टूट गया है: web.archive.org/web/20170410070341/http://dzello.com/blog/2017/…

— cmp

Answer 3

बटन पर विशेषता प्रकार = "बटन" जोड़ें, जिस पर क्लिक करने पर आपको त्रुटि दिखाई देती है, यह मेरे लिए काम करता है।

Comments

मेरे लिए काम करना ठीक है: थम्सअप:

— cederlof

Answer 4

आपको यह सुनिश्चित करना होगा कि फ़ॉर्म दस्तावेज़ में है। आप प्रपत्र को शरीर में जोड़ सकते हैं।

Comments

मेरे पास यह था और यह पता चला कि रिमोट फॉर्म सबमिट बटन पर एक ऑनक्लिक जोड़ा गया था, जिसने फॉर्म के युक्त तत्व को हटा दिया। इसलिए मूल रूप से प्रस्तुत की जा रही फॉर्म और निकाले जा रहे फॉर्म के बीच एक दौड़ की स्थिति थी।

— मैक्स विलियम्स

धन्यवाद @ मोम विलियम्स, आपकी टिप्पणी ने मुझे स्वीकृत जवाब से अधिक ट्रैक पर वापस रख दिया।

— JirkaV

Answer 5

वैकल्पिक रूप से event.preventDefault () शामिल करें; आपके हैंडल में (घटना) {

देख https://facebook.github.io/react/docs/forms.html

Comments

बाहरी संसाधनों के लिंक को प्रोत्साहित किया जाता है, लेकिन कृपया लिंक के चारों ओर संदर्भ जोड़ें ताकि आपके साथी उपयोगकर्ताओं को यह पता चले कि यह क्या है और क्यों है। हमेशा एक महत्वपूर्ण लिंक का सबसे प्रासंगिक हिस्सा उद्धृत करें, यदि लक्ष्य साइट उपलब्ध नहीं है या स्थायी रूप से ऑफ़लाइन है। एक अच्छा जवाब लिखने का तरीका

— पीटर रीड

àntdरूपों का उपयोग करना । इससे मदद मिली।

— एडुआर्ड

Answer 6

मैं देख रहा हूँ कि आप फॉर्म इनिशियलाइज़ेशन के लिए jQuery का उपयोग कर रहे हैं।

जब मैं @KyungHun Jeon का उत्तर देने की कोशिश करता हूं, तो यह मेरे लिए काम नहीं करता है कि jQuery का भी उपयोग करें।

इसलिए, मैंने jQuery के तरीके का उपयोग करके फॉर्म को शरीर में जोड़ने की कोशिश की:

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

और यह काम किया!

Answer 7

यदि आप इसे रिएक्ट में देखते हैं, तो देखने वाली बात यह है कि <form>सबमिट करते समय डोम में रेंडर करना अभी भी बाकी है। यानी, यह विफल हो जाएगा

{ 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>

Comments

दौर कि शर्ते!

— पियानोजैम

Answer 8

मुझे हमारे कार्यान्वयन में एक ही मुद्दे का सामना करना पड़ा।

हम jquery.forms.js का उपयोग कर रहे थे। जो एक फॉर्म प्लगइन है और यहाँ उपलब्ध है। http://malsup.com/jquery/form/

हमने ऊपर दिए गए एक ही उत्तर का उपयोग किया और चिपकाया गया

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

और यह काम किया। धन्यवाद।

Answer 9

KyungHun Jeon के उत्तर पर निर्भर करता है, लेकिन परिशिष्ट एक डोम नोड की उम्मीद करते हैं, इसलिए नोड को वापस करने के लिए jquery ऑब्जेक्ट में एक इंडेक्स जोड़ें: document.body.appendChild(form[0])

Comments

आपका मतलब है document.body.appendChild(form[0])?

— एफेडर

Answer 10

पोस्टीरिटी के लिए जोड़ना चूंकि यह क्रोम से संबंधित नहीं है, लेकिन यह पहला धागा था जो इस फॉर्म सबमिशन एरर को खोजते समय Google पर दिखाई दिया था।

हमारे मामले में हमने वर्तमान डिव html को "लोडिंग" एनीमेशन के साथ प्रस्तुत करने के लिए एक फ़ंक्शन संलग्न किया था - क्योंकि यह फ़ॉर्म सबमिट किए जाने से पहले हुआ था अब सबमिट करने के लिए कोई फॉर्म या डेटा नहीं था।

रेट्रोस्पेक्ट में बहुत स्पष्ट त्रुटि है, लेकिन अगर कोई भी यहां समाप्त होता है तो यह भविष्य में उन्हें कुछ समय बचा सकता है।

Answer 11

मुझे यह त्रुटि मिली है। यदि आपके पास फॉर्म में एक बटन है जिसे आप बटन की तरह काम करना चाहते हैं और फॉर्म जमा नहीं करना चाहते हैं, तो आपको इसे टाइप करना होगा = "बटन"। अन्यथा यह फॉर्म जमा करने की कोशिश करता है। मेरा मानना ​​है कि वास्कॉर्ट ने कुछ दस्तावेज़ों के साथ इसका जवाब दिया, जिन्हें आप देख सकते हैं।

Comments

यह एक चेतावनी है: फॉर्म जमा नहीं होने के कारण रद्द कर दिया गया। इसे जोड़ने के लिए भूलने के लिए क्षमा करें।

— यशायाह लार्सन

मैं इसकी पुष्टि कर सकता हूं। मुझे रिएक्ट में वही चेतावनी मिली, Form submission canceled because the form is not connectedजब भी मैंने अपने फॉर्म का "रद्द" बटन दबाया। type="button"मेरे "रद्द करें" बटन को जोड़ने के बाद , मुझे अब चेतावनी नहीं मिलती है। धन्यवाद!

— बेन

Answer 12

मैं vue में बटन तत्व में विशेषता प्रकार = "बटन" को जोड़कर संदेश से छुटकारा पाने में सक्षम था।

Answer 13

आप इसे भी हल कर सकते हैं, jquery-xxxjs में एक ही पैच लगाने के बाद, "try {rp;} catch (m) {}" लाइन 1833 इस कोड के बाद जोड़ें:

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

यह तब मान्य होता है जब कोई प्रपत्र शरीर का हिस्सा नहीं होता है और इसे जोड़ता है।

Answer 14

मैंने देखा कि मुझे यह त्रुटि मिल रही थी, क्योंकि मेरे HTML कोड में <body>टैग नहीं था ।

बिना <body>, जब document.body.appendChild(form);स्टेटमेंट में अपील करने के लिए बॉडी ऑब्जेक्ट नहीं था।

Answer 15

मैंने इस संदेश को कोणीय का उपयोग करते हुए देखा, इसलिए मैंने अभी विधि = "पोस्ट" और एक्शन = "" आउट किया, और चेतावनी चली गई।