ত্রুটি পাওয়া "ফর্ম সংযুক্ত না হওয়ার কারণে ফর্ম জমা দেওয়া বাতিল হয়েছে"

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

দেখে মনে হচ্ছে ক্রোম 56 আর এই ধরণের কোড সমর্থন করে না। তাই না? যদি হ্যাঁ আমার প্রশ্নটি হ'ল:

1. হঠাৎ কেন এমন হল? কোন অবচয় সতর্কতা ছাড়া?
2. এই কোডটির জন্য কাজটি কী?
3. কোনও কোড পরিবর্তন না করে ক্রোমকে (বা অন্যান্য ব্রাউজারগুলি) আগের মতো কাজ করার কোনও উপায় আছে কি?

PS এটি সর্বশেষতম ফায়ারফক্স সংস্করণে কাজ করে না (কোনও বার্তা ছাড়াই)। এছাড়াও এটি IE 11.0 এবং এজ এ কাজ করে না! (উভয়ই কোনও বার্তা ছাড়াই)

Comments

ফর্মটি একটি jQuery অবজেক্টের সত্যটি মেলাতে আমি স্বীকৃত উত্তরে একটি সংযোজন যুক্ত করেছি। দ্রষ্টব্য এটি jQuery .submit()হ্যান্ডলারকেও প্রভাবিত করে ( .click()উপরে বর্ণিত পদ্ধতিটি ছাড়াও )।

— রায়য়ান

Answer 1

দ্রুত উত্তর: ফর্মটি দেহে যুক্ত করুন।

document.body.appendChild(form);

বা, আপনি যদি উপরের মতো jQuery ব্যবহার করছেন: $(document.body).append(form);

বিশদ: এইচটিএমএল মান অনুসারে, ফর্মটি ব্রাউজিং প্রসঙ্গে (দস্তাবেজ) সাথে সম্পর্কিত না হলে ফর্ম জমা দেওয়া বাতিল করা হবে।

এইচটিএমএল স্পেক 4.10.21.3.2 দেখুন

ক্রোম 56-এ, এই বৈশিষ্টটি প্রয়োগ করা হয়েছিল।

ক্রোম কোডের পার্থক্য দেখুন @@ -347,9 +347,16 @@

আপনার প্রশ্ন # 1 সম্পর্কে পিএস। আমার মতে, আজাক্সের বিপরীতে, ফর্ম জমা দেওয়ার কারণে তাত্ক্ষণিক পৃষ্ঠা সরানো হয়।
সুতরাং, 'অবজ্ঞাত সতর্কতা বার্তা' দেখানো প্রায় অসম্ভব।
আমি আরও মনে করি যে এই গুরুতর পরিবর্তনটি বৈশিষ্ট্য পরিবর্তন তালিকায় অন্তর্ভুক্ত করা যায় নি তা গ্রহণযোগ্য নয়। ক্রোম 56 টি বৈশিষ্ট্য - www.chromestatus.com/features#milestone%3D56

Comments

কিছু ব্যবহারকারীদের দ্বারা এই বাগটি রিপোর্ট করা হয়েছিল। এছাড়াও, কিছু অন্যান্য ব্যবহারকারীর আপগ্রেড সংস্করণ ছিল না, তাই তারা সমস্যা ছাড়াই ফর্মটি জমা দিতে পারে। বাগটি আরও বেমানান করা। আপনার উত্তরের জন্য ধন্যবাদ!

— ইরোননেট

মূল প্রশ্নের মতো jQuery ব্যবহারের সাথে প্রস্তাবিত সমাধানটি আমার পক্ষে কার্যকর হয়নি। এটি পরিবর্তে কাজ করেছে: $(document.body).append(form);

— ক্রিস

@ ক্রিস আমি কেবলমাত্র গৃহীত উত্তরটি সম্পাদনা করেছি, যেহেতু ফর্ম ভেরিয়েবল একটি jQuery অবজেক্ট, আসল DOM ফর্ম উপাদান নয়। যেমন এটি ব্যবহার করা হচ্ছে form[0], এটি একটি ত্রুটি তৈরি করবে "" নোডে 'অ্যাপেন্ডচিল্ড' কার্যকর করতে ব্যর্থ: প্যারামিটার 1 'নোড' টাইপ নয় "" ক্রোমে সুতরাং, শুধু পরিবর্তন document.body.appendChild(form[0])।

— রায়য়ান

@ আর্য্যানম, আমি নিম্নলিখিত পংক্তির অবদানের জন্য আমি কেবল একজন সম্পাদক $(document.body).append(form);। আপনি যদি স্বাগত হন তবে আপনার সমাধানটি সম্পাদনা করে বা @ কিংহুন জিয়নকে জিজ্ঞাসা করে এটির পরিবর্তে আপনার সমাধানটি যুক্ত করুন যদি তিনি তার পরিবর্তে আপনার সমাধান গ্রহণ করতে চান তবে।

— ক্রিস

@ ক্রিস ধন্যবাদ! আমি প্রশ্নটি যেহেতু জিকুয়েরিতে ছিলাম, উত্তরটি খুব বেশি হওয়া উচিত (বিভ্রান্তিকর হতে পারে) তবে আমার সম্পাদনাটি এটি প্রত্যাখাত বলে মনে হচ্ছে। অন্য যাত্রীদের জন্য কেবলমাত্র একটি নোট এটির document.body.appendChild(form[0])(সামান্য দ্রুত) OR হতে পারে $(document.body).append(form)।

— রায়ানম

Answer 2

আপনি যখন এন্টার টিপুন করে ফর্মটি জমা দেওয়ার চেষ্টা করছেন তখন জেএস-এ এই ত্রুটিটি যদি আপনি দেখেন তবে ফর্মটি জমা না দেওয়ার ফর্মের আপনার সমস্ত বোতামের একটি রয়েছে তা নিশ্চিত করুন 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>এটি ক্লিক করার পরে এখনও ডিওমে রেন্ডার করতে হবে। যেমন, এটি ব্যর্থ হবে। {this.state.submitting? <div> ফর্ম জমা দেওয়া হচ্ছে </ div>: <ফর্ম onSubmit = {() => এই.সেট স্টেট ({জমা দেওয়া: সত্য}) ...> <বোতাম ...> </for>} `সুতরাং যখন ফর্মটি জমা দেওয়া হয়, state.submittingসেট হয়ে যায় এবং ফর্মের পরিবর্তে "জমা দেওয়া ..." বার্তাটি রেন্ডার করে, তারপরে এই ত্রুটি ঘটে। শর্তসাপেক্ষে ফর্ম ট্যাগটি সরিয়ে নেওয়া নিশ্চিত করে যে প্রয়োজনের সময় এটি সর্বদা ছিল।

— মাইক রুহলিন

জেনে ভালো লাগল. আমার ধারণা আপনার পুরো formউপাদানটি একটিতে পরিবর্তন করতে হবে না div। আমি বিশ্বাস করি যে আপনি যদি formউপাদানটি পরিবর্তনের পরিবর্তে কেবলমাত্র বিষয়বস্তু পরিবর্তন করেন এটি এটি প্রত্যাশার মতো কাজ করবে।

— ভাসকোর্ট

সুতরাং, ম্যাক্স উইলিয়ামস যেমন বলেছেন, এটি একটি রেসের শর্ত - ব্রাউজারটি ফর্মটি আছে কিনা তা পরীক্ষা করে দেখছে, তবে ফর্মটি ইতিমধ্যে গেছে gone

— পিয়ানোজেমস

প্রতিরোধ ডিফল্ট () ক্রোম থেকে এই সতর্কতা সৃষ্টি করে

— imbatman

প্রথম লিঙ্কটি অসম্পূর্ণ: web.archive.org/web/20170410070341/http://dzello.com/blog/2017/...

— CMP

Answer 3

অ্যাট্রিবিউট যোগ টাইপ = "বোতাম" যারা দেখতে ত্রুটি, এটা আমার জন্য কাজ ক্লিক হচ্ছে সে বিষয়ে বাটন।

Comments

আমার জন্য ভাল কাজ:

— থাম্বসআপ

Answer 4

আপনাকে অবশ্যই নিশ্চিত করতে হবে যে ফর্মটি নথিতে রয়েছে। আপনি ফর্মটি শরীরে সংযোজন করতে পারেন।

Comments

আমার কাছে এটি ছিল এবং দেখা গেল যে দূরবর্তী ফর্ম জমা বোতামটিতে একটি অনক্লিক যুক্ত ছিল, যা ফর্মটির উপাদানটি সরিয়েছে। সুতরাং ফর্মটি জমা দেওয়া এবং ফর্মটি সরিয়ে ফেলার মধ্যে মূলত একটি দৌড় শর্ত ছিল।

— ম্যাক্স উইলিয়ামস

ধন্যবাদ @ ম্যাক্স উইলিয়ামস, আপনার মন্তব্য আমাকে গৃহীত উত্তরের চেয়ে বেশি ট্র্যাকে ফেলেছে।

— জিরকাভি

Answer 5

বিকল্পভাবে ইভেন্ট.প্রিভেন্টডেফল্ট () অন্তর্ভুক্ত করুন; আপনার হ্যান্ডেল সাবমিট (ইভেন্ট) in

দেখতে https://facebook.github.io/react/docs/forms.html

Comments

বাহ্যিক সংস্থানগুলিতে লিঙ্কগুলি উত্সাহিত করা হয় তবে দয়া করে লিঙ্কটির চারপাশে প্রসঙ্গটি যুক্ত করুন যাতে আপনার সহ ব্যবহারকারীদের এটি কী এবং কেন আছে তা কিছুটা ধারণা থাকতে পারে। টার্গেট সাইটটি যদি অ্যাক্সেসযোগ্য না হয় বা স্থায়ীভাবে অফলাইনে চলে যায় তবে সর্বদা গুরুত্বপূর্ণ লিঙ্কের সর্বাধিক প্রাসঙ্গিক অংশটি উদ্ধৃত করুন। কীভাবে একটি ভাল উত্তর লিখবেন তা

— পিটার রেড

àntdফর্ম ব্যবহার করে। এই সাহায্য করেছে।

— এডুয়ার্ড

Answer 6

আমি দেখছি আপনি ফর্ম আরম্ভের জন্য jQuery ব্যবহার করছেন।

আমি যখন কাইংহুন জিয়নের উত্তরটি চেষ্টা করি, তখন আমার পক্ষে এটি 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

কিউংহুন জিয়নের উত্তরের উপর নির্ভর করে, তবে অ্যাপেন্ডচিল্ড কোনও ডোম নোডের প্রত্যাশা করে, তাই নোডটি ফেরত দেওয়ার জন্য jquery অবজেক্টে একটি সূচক যুক্ত করুন: document.body.appendChild(form[0])

Comments

মানে document.body.appendChild(form[0])?

— এফিডার

Answer 10

এটি ক্রোম সম্পর্কিত নয় বলে উত্তরসূরিদের জন্য যুক্ত করা হচ্ছে তবে এই ফর্মটি জমা দেওয়ার ত্রুটিটি অনুসন্ধান করার সময় এটিই প্রথম থ্রেড যা গুগলে প্রদর্শিত হয়েছিল।

আমাদের ক্ষেত্রে আমরা বর্তমান ডিভ এইচটিএমএলকে জমা দেওয়ার সময় "লোডিং" অ্যানিমেশন সহ প্রতিস্থাপনের জন্য একটি ফাংশন সংযুক্ত করেছি - যেহেতু এটি ফর্মটি জমা দেওয়ার আগে ঘটেছিল সেখানে জমা দেওয়ার জন্য আর কোনও ফর্ম বা ডেটা ছিল না।

পূর্ববর্তী ক্ষেত্রে খুব সুস্পষ্ট ত্রুটি তবে কেউ যদি এখানে শেষ হয় তবে ভবিষ্যতে তাদের কিছুটা সময় বাঁচাতে পারে।

Answer 11

আমি এই ত্রুটিটি react.js এ পেয়েছি। আপনি যদি ফর্মটিতে একটি বোতাম থাকে যা আপনি বোতামের মতো কাজ করতে চান এবং ফর্মটি জমা দিতে না চান, আপনাকে অবশ্যই এটি টাইপ = "বোতাম" দিতে হবে। অন্যথায় এটি ফর্মটি জমা দেওয়ার চেষ্টা করে। আমি বিশ্বাস করি ভাসকোর্ট কিছু ডকুমেন্টেশন দিয়ে এর জবাব দিয়েছেন যা আপনি পরীক্ষা করে দেখতে পারেন।

Comments

এটি একটি সতর্কতা: ফর্ম সংযুক্ত না হওয়ার কারণে ফর্ম জমা দেওয়া বাতিল হয়েছে। এটি যুক্ত করতে ভুলে যাওয়ার জন্য দুঃখিত

— যিশাইয় লারসেন

আমি এটি নিশ্চিত করতে পারি। আমি Form submission canceled because the form is not connectedযখনই আমার ফর্মটির "বাতিল" বোতাম টিপলাম তখন প্রতিক্রিয়াতে আমি একই সতর্কতা পেয়েছি । type="button"আমার "বাতিল" বোতামে যুক্ত করার পরে , আমি আর সতর্কতা পাই না। ধন্যবাদ!

— বেন

Answer 12

আমি বার্তাটি বাছাই করতে সক্ষম হয়েছি = "বোতাম" বৈশিষ্ট্যটি পরিবর্তিত বোতামের উপাদানটিতে যুক্ত করে।

Answer 13

আপনি জেকারি-এক্সএক্সএক্সএক্সজে একক প্যাচ প্রয়োগ করেও এটি সমাধান করতে পারেন, এই কোডটি "ট্রাই {আরপি; m ক্যাচ (এম) line}" লাইন 1833 পরে যুক্ত করুন:

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

যখন কোনও ফর্ম শরীরের অংশ না থাকে এবং এটি যুক্ত করে তখন এটি বৈধ হয়।

Answer 14

আমি এই বার্তাটি কৌণিক ব্যবহার করে দেখেছি, সুতরাং আমি কেবল পদ্ধতি = "পোস্ট" এবং পদক্ষেপ = "" বের করেছি এবং সতর্কতাটি শেষ হয়ে গেল।