আপনি কীভাবে এইচটিএমএল ফর্মের নীড় সীমাবদ্ধতা অতিক্রম করবেন?


199

আমি জানি যে এক্সএইচটিএমএল নেস্টেড ফর্ম ট্যাগগুলিকে সমর্থন করে না এবং আমি ইতিমধ্যে এই বিষয় সম্পর্কে স্ট্যাক ওভারফ্লোতে এখানে অন্যান্য উত্তরগুলি পড়েছি, তবে আমি এখনও সমস্যার একটি মার্জিত সমাধান খুঁজে পাইনি।

কেউ কেউ বলেন যে আপনার এটির দরকার নেই এবং তারা কোনও দৃশ্যের কথা ভাবতে পারে না যদি এটির প্রয়োজন হত। ওয়েল, ব্যক্তিগতভাবে আমি একটি দৃশ্যকল্পের যে আমি মনে করতে পারেন না করেন নি এটা প্রয়োজন ছিল।

আসুন একটি খুব সাধারণ উদাহরণটি দেখুন:

আপনি একটি ব্লগ অ্যাপ তৈরি করছেন এবং একটি নতুন পোস্ট তৈরির জন্য কয়েকটি ক্ষেত্র এবং "সেভ", "মুছুন", "বাতিল" এর মতো "ক্রিয়াগুলি" সহ একটি সরঞ্জামদণ্ডের সাথে আপনার একটি ফর্ম রয়েছে।

<form
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"
method="post">

    <input type="text" name="foo" /> <!-- several of those here -->
    <div id="toolbar">
        <input type="submit" name="save" value="Save" />
        <input type="submit" name="delete" value="Delete" />
        <a href="/home/index">Cancel</a>
    </div>
</form>

আমাদের উদ্দেশ্যটি এমনভাবে ফর্মটি লেখার জন্য যাতে জাভাস্ক্রিপ্টের প্রয়োজন হয় না , কেবল পুরানো এইচটিএমএল ফর্ম এবং বোতাম জমা দেওয়া।

যেহেতু অ্যাকশন URL টি ফর্ম ট্যাগে সংজ্ঞায়িত করা হয়েছে এবং প্রতিটি স্বতন্ত্র জমা দেওয়া বোতামে নয়, তাই আমাদের একমাত্র বিকল্পটি একটি জেনেরিক URL এ পোস্ট করা এবং তারপরে "যদি ... তবে ... অন্য" বোতামটির নাম নির্ধারণ করা শুরু করা হয় যা জমা দেওয়া হয়েছিল। খুব মার্জিত নয়, তবে আমাদের একমাত্র পছন্দ, যেহেতু আমরা জাভাস্ক্রিপ্টের উপর নির্ভর করতে চাই না।

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

আপনি বলতে পারেন "জমা দেওয়ার পরিবর্তে কেবল" মুছুন "একটি লিঙ্ক হিসাবে প্রয়োগ করুন"। এটি এতগুলি স্তরে ভুল হতে পারে তবে সর্বাধিক গুরুত্বপূর্ণ কারণ এখানে "মুছুন" এর মতো পার্শ্ব-প্রতিক্রিয়া ক্রিয়াগুলি কখনই জিইটি অনুরোধ হওয়া উচিত নয়।

সুতরাং আমার প্রশ্ন (বিশেষত যারা বলে যে তাদের ফর্ম বাসা বাঁধার দরকার নেই) আপনি কী করেন? আমি অনুপস্থিত এমন কোনও দুর্দান্ত সমাধান আছে বা নীচের লাইনটি সত্যিই "হয় জাভাস্ক্রিপ্টের প্রয়োজন হয় বা সমস্ত কিছু জমা দিন"?


17
এটি মজাদার, তবে এক্সএইচটিএমএল এন্টারপ্রাইজ ফর্ম নেস্টিং মঞ্জুরি দেয় আকর্ষণীয় নোট anderwald.info/internet/nesting-for-tags-in-xhtml - (এক্স) এইচটিএমএল "ফর্ম> ফর্ম" এর মতো নেস্টিং ফর্মগুলি নিষিদ্ধ করে তবে "ফর্ম> ফিল্ডসেট> ফর্ম ", ডাব্লু 3 বৈধকরণকারী বলেছেন যে এটি বৈধ, তবে ব্রাউজারগুলিতে এরকম বাসা রয়েছে gs
নিশি


@ নিশির মন্তব্যের জন্য লিঙ্ক্রোট ফিক্স লিংক: web.archive.org/web/20170420110433/http://anderwald.info/…
অ্যালবার্ট

উত্তর:


53

আপনি বর্ণিত হিসাবে আমি ঠিক এটি প্রয়োগ করব: সার্ভারে সবকিছু জমা দিন এবং / কী কী বোতামটি ক্লিক করা হয়েছিল তা পরীক্ষা করার জন্য একটি সরল কাজ করুন।

এবং তারপরে আমি একটি জাভাস্ক্রিপ্ট কলটি ফর্মের অনসিমিটে ইভেন্টে বেঁধে ফর্মটি প্রয়োগ করব যা ফর্মটি জমা দেওয়ার আগে যাচাই করবে এবং কেবলমাত্র সার্ভারে প্রাসঙ্গিক ডেটা জমা দেবে (সম্ভবত পৃষ্ঠায় দ্বিতীয় আই ফর্মের মাধ্যমে জিনিসটি প্রক্রিয়া করার জন্য প্রয়োজনীয়) একটি লুকানো ইনপুট, বা আপনাকে জিইটি অনুরোধ হিসাবে পাস করার প্রয়োজন ডেটা সহ পৃষ্ঠার অবস্থানটি রিফ্রেশ করুন, বা সার্ভারে একটি অ্যাজাক্স পোস্ট করুন, বা ...)।

এইভাবে জাভাস্ক্রিপ্টবিহীন লোকেরা ফর্মটি ঠিকঠাকভাবে ব্যবহার করতে সক্ষম হয়েছে তবে সার্ভার লোডটি অফসেট হয়ে গেছে কারণ জাভাস্ক্রিপ্ট থাকা লোকেরা কেবলমাত্র প্রয়োজনীয় একক টুকরো জমা দিচ্ছে। নিজেকে কেবল একজন বা অন্যকে সমর্থন করার দিকে মনোনিবেশ করা আপনার অপশনগুলি অহেতুক সীমিত করে দেয়।

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


15
ওপি আসলটি কোনও জাভাস্ক্রিপ্ট উল্লেখ করেনি
জেসন

26
এই পদ্ধতির সমস্যাটি হ'ল এটি অ-বিশ্রামযোগ্য। একটি সংরক্ষণ এবং মুছে ফেলা সম্পদটির বিভিন্ন ক্রিয়নের সাথে সঙ্গতিপূর্ণ: "সংরক্ষণ করুন" -> পোষ্ট / মাই_রেসোর্স (একটি নতুন সংস্থান তৈরি করা) "সংরক্ষণ করুন" -> পুট / মাই_রেসোর্স (একটি বিদ্যমান সংস্থান পরিবর্তন করে) "মুছুন" -> মোছা / মাই_রেসোর্স (ধ্বংস করুন) রিসোর্স) সত্যিই বলতে গেলে সমস্যাটি হ'ল কোনও পোষ্ট একটি নতুন সংস্থান তৈরি করবে বলে আশা করা হচ্ছে। অবশ্যই এটি কোনও বিদ্যমান উত্স মুছে ফেলা উচিত নয়।
ব্যবহারকারী 132447

177

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে এইচটিএমএল 5 কয়েকটি নতুন বিকল্প প্রস্তাব করে।

প্রথমটি হ'ল মার্কআপে সরঞ্জামদণ্ড থেকে ফর্মটি আলাদা করা, মুছা ক্রিয়াটির জন্য অন্য ফর্ম যুক্ত করা এবং formবৈশিষ্ট্যটি ব্যবহার করে সরঞ্জামদণ্ডের বোতামগুলিকে তাদের নিজ নিজ ফর্মের সাথে যুক্ত করা।

<form id="saveForm" action="/post/dispatch/save" method="post">
    <input type="text" name="foo" /> <!-- several of those here -->  
</form>
<form id="deleteForm" action="/post/dispatch/delete" method="post">
    <input type="hidden" value="some_id" />
</form>
<div id="toolbar">
    <input type="submit" name="save" value="Save" form="saveForm" />
    <input type="submit" name="delete" value="Delete" form="deleteForm" />
    <a href="/home/index">Cancel</a>
</div>

এই বিকল্পটি বেশ নমনীয়, তবে মূল পোস্টে এটি উল্লেখ করেছে যে একটি ফর্মের সাথে বিভিন্ন ক্রিয়া সম্পাদন করা প্রয়োজন হতে পারে। এইচটিএমএল 5 আবার উদ্ধার করতে আসে। আপনি formactionসাবমিট বাটনগুলিতে বৈশিষ্ট্যটি ব্যবহার করতে পারেন , তাই একই ফর্মের বিভিন্ন বোতাম বিভিন্ন ইউআরএল জমা দিতে পারে। এই উদাহরণটি কেবল ফর্মের বাইরে সরঞ্জামদণ্ডে একটি ক্লোন পদ্ধতি যুক্ত করে তবে এটি ফর্মটিতে একইভাবে কাজ করবে।

<div id="toolbar">
    <input type="submit" name="clone" value="Clone" form="saveForm"
           formaction="/post/dispatch/clone" />
</div>

http://www.whatwg.org/specs/web-apps/current-work/#attributes-for-form-submission

এই নতুন বৈশিষ্ট্যগুলির সুবিধা হ'ল তারা এগুলি জাভাস্ক্রিপ্ট ছাড়াই ঘোষিতভাবে ঘোষণা করে। অসুবিধাটি হ'ল তারা পুরানো ব্রাউজারগুলিতে সমর্থিত নয়, তাই আপনাকে পুরানো ব্রাউজারগুলির জন্য কিছু পলিফিলিং করতে হবে।


4
+1 - তবে ব্রাউজারের সমর্থনটি কী তা জানা ভাল form=লাগবে - CanIUse সত্যিই বলে না। caniuse.com/#feat=forms
AKX

1
ঠিক এটি দুর্দান্ত, তবে আজকের মতো IE দ্বারা সমর্থিত কোনও বৈশিষ্ট্য এখনও এটিকে 'উত্পাদন' ব্যবহারের জন্য অযোগ্য ঘোষণা করে
জাকো

3
<input>বোতাম ঘোষণার জন্য ব্যবহার করা খারাপ অভ্যাস । <button>উপাদান 15 বছর আগে এই কাজের জন্য চালু করা হয়। সত্যিই মানুষ।
নিকোলাস শ্যাঙ্কস

27
আপনার বক্তব্য অপ্রয়োজনীয়ভাবে বিতর্কিত এবং অপির প্রশ্ন সম্পর্কিত অপ্রাসঙ্গিক। ওপি জাভাস্ক্রিপ্ট ব্যবহার না করে ফর্ম বাসা বাঁধার সীমাবদ্ধতা সম্পর্কে জিজ্ঞাসা করেছিল এবং উত্তরটি সমাধান দেয়। আপনি যেমনটি ব্যবহার করেন <input>বা <button>উপাদানগুলি অপ্রাসঙ্গিক, যদিও বোতামগুলি সাধারণত সরঞ্জামদণ্ডগুলির জন্য আরও উপযুক্ত। যাইহোক, বোতামের উপাদানগুলি 15 বছর ধরে সমস্ত ব্রাউজার দ্বারা সমর্থিত নয়।
shovavnik

6
@ ক্যাক্স যদিও একটি পুরানো বিবৃতি, আপনি এই বৈশিষ্ট্যটির জন্য সমর্থনটি এখানে দেখতে সক্ষম হবেন: html5test.com/compare/feature/form-association-form.html । আইই একটি রাইটিং অফ, বেশিরভাগ অন্যান্য ডেস্কটপ ব্রাউজারগুলি সহনীয় বলে মনে হয়।
চর্বিযুক্ত

16

পৃষ্ঠায় পাশাপাশি ফর্মগুলি রাখতে পারেন, তবে নেস্টেড নয় তারপরে সমস্ত বোতাম লাইন আপ সুন্দর করার জন্য সিএসএস ব্যবহার করবেন?

<form method="post" action="delete_processing_page">
   <input type="hidden" name="id" value="foo" />
   <input type="submit" value="delete" class="css_makes_me_pretty" />
</form>

<form method="post" action="add_edit_processing_page">
   <input type="text" name="foo1"  />
   <input type="text" name="foo2"  />
   <input type="text" name="foo3"  />
   ...
   <input type="submit" value="post/edit" class="css_makes_me_pretty" />
</form>

5
হ্যাঁ এবং এটি খুব হ্যাকিশ অনুভব করে। প্লাস একটি খুব বড় পৃষ্ঠায় (ট্যাবগুলি এবং সাব-ট্যাবগুলির কল্পনা করুন এবং বিভিন্ন স্কোপ স্তরে নেস্টিং বোতাম জমা দিন) উপাদানগুলির পর্দার অবস্থানটি নথিতে তাদের অবস্থান থেকে সম্পূর্ণ আলাদা করা প্রায় অসম্ভব।
gCoder

3
ভাল, এটি আপনি যা করতে চান এবং আপনি কী করতে পারেন এর মধ্যে সর্বদা ভারসাম্য বজায় থাকে। দেখে মনে হচ্ছে সেগুলি অপশনগুলি - সার্ভারে একটি ফর্ম হ্যান্ডল করা হয়, বা একাধিক ফর্ম যা বজায় রাখা কঠিন হয়ে পড়ে - বিজ্ঞতার সাথে চয়ন করুন :)
জেসন

3
হ্যাঁ, দুর্ভাগ্যক্রমে এইচটিএমএল-এ সমস্ত সীমাবদ্ধতার সাথে আমি কেবল সমর্থন করে যা ধরে থাকব এবং পুরো ফর্মটি সার্ভারে প্রেরণ করব এবং তারপরে ফর্ম সাবমিশনটিকে বাধা দেওয়ার জন্য সমর্থনকারী ক্লায়েন্টদের জন্য জাভাস্ক্রিপ্টটি নিরবিচ্ছিন্নভাবে ব্যবহার করব এবং কেবল যা সত্য প্রয়োজন তা প্রেরণ করব। এটিই সেরা সমঝোতা।
gCoder

13

এইচটিএমএল 5 এর "ফর্মের মালিক" - ইনপুট উপাদানগুলির জন্য "ফর্ম" বৈশিষ্ট্য সম্পর্কে ধারণা রয়েছে। এটি নেস্টেড ফর্মগুলি অনুকরণ করতে দেয় এবং সমস্যাটি সমাধান করবে।


1
এই লিঙ্কের কোন রেফারেন্স?
ডাকব

W3.org/TR/html5/forms.html#form-owner দেখুন "একটি ফর্ম-সম্পর্কিত উপাদানটি ডিফল্টরূপে তার নিকটতম পূর্বপুরুষের ফর্ম উপাদানটির সাথে সম্পর্কিত হয়, তবে, যদি এটি পুনরায় যোগাযোগযোগ্য হয় তবে ওভাররাইডে নির্দিষ্ট হওয়া একটি ফর্ম বৈশিষ্ট্য থাকতে পারে এই."
নিশি

11

পুরানো বিষয়ের মতো, তবে এটি কারও পক্ষে কার্যকর হতে পারে:

উপরে উল্লিখিত কেউ হিসাবে - আপনি ডামি ফর্মটি ব্যবহার করতে পারেন। কিছুক্ষণ আগে আমাকে এই সমস্যাটি কাটিয়ে উঠতে হয়েছিল। প্রথমে আমি এই এইচটিএমএল বিধিনিষেধ সম্পর্কে সম্পূর্ণ ভুলে গিয়েছিলাম এবং কেবল নেস্টেড ফর্মগুলি যুক্ত করেছি। ফলাফল আকর্ষণীয় ছিল - আমি নেস্টেড থেকে আমার প্রথম ফর্মটি হারিয়েছি। তারপরে এটি আসল নেস্টেড ফর্মগুলির আগে কেবল একটি ডামি ফর্ম (যা ব্রাউজার থেকে সরানো হবে) যুক্ত করার জন্য এটি "ধরণের" কৌশল হিসাবে পরিণত হয়েছিল।

আমার ক্ষেত্রে এটি দেখতে এমন দেখাচ্ছে:

<form id="Main">
  <form></form> <!--this is the dummy one-->
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  ......
</form>

ক্রোম, ফায়ারফক্স এবং সাফারি দিয়ে দুর্দান্ত কাজ করে। IE 9 পর্যন্ত (10 সম্পর্কে নিশ্চিত নয়) এবং অপেরা মূল ফর্মটিতে প্যারামিটারগুলি সনাক্ত করে না। ইনপুট নির্বিশেষে $ _REQ_REUEST গ্লোবালটি খালি। অভ্যন্তরীণ ফর্মগুলি সর্বত্র দুর্দান্ত কাজ করছে বলে মনে হচ্ছে।

এখানে বর্ণিত আরেকটি পরামর্শ পরীক্ষা করা হয়নি - নেস্টেড ফর্মগুলির চারপাশে ফিল্ডসেট।

সম্পাদনা : ফ্রেমসেট কাজ করেনি! আমি অন্যদের পরে কেবল প্রধান ফর্মটি যুক্ত করেছি (আর নেস্টেড ফর্মগুলি নেই) এবং বোতাম ক্লিকের ফর্মে ডুপ্লিকেট ইনপুটগুলি jQuery এর "ক্লোন" ব্যবহার করেছি। লেআউটটি অপরিবর্তিত রাখতে প্রতিটি ক্লোন করা ইনপুটগুলিতে .hide () যুক্ত করা হয়েছে এবং এখন এটি কবজির মতো কাজ করে।


এটি আমার জন্য পুরোপুরি কাজ করেন। আমি একটি এসপ নেট পৃষ্ঠায় কাজ করছিলাম, যার একটি সর্ব-সংযুক্তকরণ ফর্ম ছিল। JQuery বৈধতা প্লাগইন ( github.com/jzaefferer/jquery- যাচাইকরণ ) ব্যবহার করার জন্য আমার অভ্যন্তরীণ নেস্টেড ফর্ম ছিল এবং এটি ফায়ারফক্স এবং আইইতে পুরোপুরি কাজ করার সময় এটি ' টাইপআরার: ক্রমটিতে কল করতে পারে না পদ্ধতিটিকে' উপাদানটির সাথে কল করতে পারে না Chrome অনির্ধারিত। বৈকল্পিক () প্রারম্ভিককরণ কলটি ব্যর্থ হয়েছে যেহেতু এটি অভ্যন্তরীণ ফর্মটি খুঁজে পাচ্ছে না, কারণ ক্রিম এটি jQuery.html () ব্যবহার করে এইচটিএমএল ব্লক থেকে সরিয়েছে। একটি ছোট ডামি ফর্ম যুক্ত করার ফলে ক্রোমকে আসলটি ছেড়ে যায় leave
জন - একটি সংখ্যা নয়

এটি আর কাজ করে না বলে মনে হচ্ছে। ফায়ারফক্স দ্বিতীয় <for>> ট্যাগটি কেড়ে নিয়েছিল এবং তারপরে আমার প্রথম ফর্মটি </ form> ট্যাগটি দিয়ে শেষ করে। এটি পৃষ্ঠার নীচে একটি অবৈধ </ translation> ট্যাগ এবং সঠিকভাবে জমা দেবে না এমন একটি ফর্ম রেখে গেছে। :(
তারকুইন

আমার জন্য খুব দরকারী। আমি একটি ওয়েব উইজেট যুক্ত করছি যা একটি এসপ নেট পৃষ্ঠায় ফর্ম ধারণ করে। ওয়েবফোর্মে আশ্চর্য হওয়া যে এটি সবসময় এইচটিএমএল বডিতে সমস্ত কিছু ঘিরে থাকা একটি ফর্ম তৈরি করে। ঘেরযুক্ত ফর্মটি ওয়েব উইজেটের জন্য মাথাব্যথা হয়ে ওঠে। ডামি ফর্মটি এই পরিস্থিতির জন্য একটি দ্রুত এবং কার্যকর সমাধান বলে মনে হচ্ছে। এটি এখনও পর্যন্ত ক্রোম এবং সাফারিতে পুরোপুরি কাজ করে, এখনও ফায়ারফক্স পরীক্ষা করে নি। ভাগ করে নেওয়ার জন্য আপনাকে ধন্যবাদ, আমাকে অনেক সময় বাঁচিয়েছে!
জেএম ইয়াং

4

আমি জেসনকে ঠিক বলেছি যদি আপনার "মুছুন" ক্রিয়াটি ন্যূনতম হয় তবে এটিকে নিজেই একটি ফর্ম হিসাবে তৈরি করুন এবং এটিকে অন্য বোতামগুলির সাথে সজ্জিত করুন যাতে ইন্টারফেসটি একীভূত ফর্মের মতো দেখা যায়, তা না হলেও।

অথবা, অবশ্যই, আপনার ইন্টারফেসটিকে নতুন করে ডিজাইন করুন এবং লোকেদের অন্য কোথাও পুরোপুরি মুছতে দিন যার জন্য তাদের এনরোমো ফর্মটি দেখার দরকার নেই।


2

জাভাস্ক্রিপ্ট ব্যতীত আমি এটি করার একটি উপায় হ'ল রেডিও বোতামগুলির একটি সেট যুক্ত করা হবে যা নেওয়া হবে এমন ক্রিয়াটি সংজ্ঞায়িত করে:

  • হালনাগাদ
  • মুছে ফেলা
  • যাই হোক

তারপরে অ্যাকশন স্ক্রিপ্টটি রেডিও বোতাম সেটটির মানের উপর নির্ভর করে বিভিন্ন পদক্ষেপ গ্রহণ করবে।

আরেকটি উপায় হ'ল নেস্টেড নয়, আপনার পরামর্শ অনুসারে পৃষ্ঠাতে দুটি ফর্ম রাখা। লেআউটটি নিয়ন্ত্রণ করা কঠিন হতে পারে যদিও:

<ফর্মের নাম = "editform" ক্রিয়া = "the_action_url" পদ্ধতি = "পোস্ট">
   <ইনপুট টাইপ = "লুকানো" নাম = "টাস্ক" মান = "আপডেট" />
   <ইনপুট টাইপ = "পাঠ্য" নাম = "ফু" />
   <ইনপুট টাইপ = "জমা" নাম = "সংরক্ষণ" মান = "সংরক্ষণ করুন" />
</ ফর্ম>

<ফর্মের নাম = "ডেলফর্ম" ক্রিয়া = "দ্য_অ্যাকশন_আরল" পদ্ধতি = "পোস্ট">
   <ইনপুট টাইপ = "লুকানো" নাম = "টাস্ক" মান = "মুছুন" />
   <ইনপুট টাইপ = "লুকানো" নাম = "পোস্ট_আইডি" মান = "5" />
   <ইনপুট টাইপ = "জমা" নাম = "মুছুন" মান = "মুছুন" />
</ ফর্ম>

হ্যান্ডলিং স্ক্রিপ্টে লুকানো "টাস্ক" ফিল্ডটি যথাযথভাবে শাখায় ব্যবহার করা।


1

এই আলোচনাটি এখনও আমার আগ্রহের বিষয়। মূল পোস্টের পিছনে রয়েছে "প্রয়োজনীয়তা" যা ওপি ভাগ করে নেবে - অর্থাত্ পিছনের সামঞ্জস্য সহ একটি ফর্ম। যার লেখার সময় কারও কাজটি মাঝে মাঝে আই 6-এ ফিরে আসতে (এবং আগত বছর ধরে) সমর্থন করে, আমি এটি খনন করি।

কাঠামোটি চাপ না দিয়ে (সমস্ত সংস্থাগুলি সামঞ্জস্যতা / দৃust়তার উপর নিজেকে আশ্বস্ত করতে চায় এবং আমি এই আলোচনাকে কাঠামোর ন্যায়সঙ্গত হিসাবে ব্যবহার করছি না), এই ইস্যুটির ড্রুপাল সমাধান আকর্ষণীয়। দ্রুপালও সরাসরি প্রাসঙ্গিক কারণ কাঠামোর একটি দীর্ঘকালীন নীতি ছিল "এটি জাভাস্ক্রিপ্ট ছাড়াই কাজ করা উচিত (কেবলমাত্র আপনি চাইলে)" অর্থাৎ ওপি'র সমস্যা।

ট্রিপিং_এলিমেন্ট (হ্যাঁ, কোডের মধ্যে এটি নাম) খুঁজে পেতে ড্রুপাল বরং এটি বিস্তৃত ফর্ম ব্যবহার করে । Form_builder এর জন্য API পৃষ্ঠায় তালিকাভুক্ত কোডটির নীচের অংশটি দেখুন (আপনি যদি বিশদটি খনন করতে চান তবে উত্সটি সুপারিশ করা হয় - ড্রুপাল-এক্স.এক্সএক্স / অন্তর্ভুক্ত / ফর্ম.ইনক )। বিল্ডার স্বয়ংক্রিয় এইচটিএমএল অ্যাট্রিবিউট জেনারেশন ব্যবহার করে এবং এর মাধ্যমে, রিটার্নে কোন বোতামটি চাপছিল তা সনাক্ত করতে পারে এবং সেই অনুযায়ী কাজ করতে পারে (এগুলি পৃথক প্রক্রিয়া চালানোর জন্যও সেটআপ করা যেতে পারে)।

ফর্ম নির্মাতার বাইরেও, ড্রুপাল তথ্য মুছে ফেলার জন্য পৃথক ইউআরএল / ফর্মগুলিতে 'মুছে ফেলুন' ক্রিয়াগুলি সম্ভবত মূল পোস্টে উল্লিখিত কারণগুলির জন্য সম্ভবত। এই কিছু / ধাপ তালিকা অনুসন্ধান সাজানোর দরকার ( গাঁ অন্য ফর্ম !, কিন্তু ব্যবহারকারী বান্ধব হয়) একটি প্রাথমিক হিসাবে। তবে এর "সমস্ত কিছু জমা দিন" ইস্যুটি সরিয়ে ফেলার সুবিধা রয়েছে। ডেটা সহ বড় ফর্মটি এটির উদ্দেশ্যে, ডেটা তৈরি / আপডেট করা (বা এমনকি 'মার্জ' ক্রিয়া) এর জন্য ব্যবহৃত হয়।

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


0

iframeনেস্টেড ফর্মের জন্য একটি ব্যবহার করুন। তাদের যদি ক্ষেত্রগুলি ভাগ করে নেওয়া দরকার তবে ... এটি সত্যই নেস্টেড নয়।


1
আইফ্রেমে ব্যবহার করা একটি দুর্দান্ত ধারণা, এটি কেবল লজ্জাজনক যে বেশিরভাগ ক্ষেত্রে আপনাকে এটির আকার পরিবর্তন করতে জাভাস্ক্রিপ্টের প্রয়োজন হবে (যেহেতু আপনি বুঝতে পারবেন না যে ব্যবহারকারীর পাঠ্য আকারটি কী হবে তাই বোতামটি কত বড় হবে)।
নিকোলাস শ্যাঙ্কস

@ নিকোলাস, আপনি এটির আকার পরিবর্তন করতে জাভাস্ক্রিপ্ট কীভাবে ব্যবহার করতে পারেন? আইফ্রেমেড এইচটিএমএল যদি একই ডোমেনে না থাকে তবে আইফ্রেমে এবং তদ্বিপরীত সাথে কথা বলতে পারে না।
ড্যান রোজনস্টার্ক

@ নিকোলাস, ধন্যবাদ, কেবল তারা একই ডোমেনে থাকতে হবে তা নিশ্চিত করতে চেয়েছিলেন
ড্যান রোজনস্টার্ক

0

আমার সমাধানটি হ'ল বোতামগুলি জেএস ফাংশনগুলিকে কল করবে যা মূল ফর্মের বাইরে ফর্মগুলি লিখে এবং তারপরে জমা দেয়

<head>
<script>
function removeMe(A, B){
        document.write('<form name="removeForm" method="POST" action="Delete.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.removeForm.submit();
}
function insertMe(A, B){
        document.write('<form name="insertForm" method="POST" action="Insert.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.insertForm.submit();
}
</script>
</head>

<body>
<form method="POST" action="main_form_purpose_page.php">

<input type="button" name="remove" Value="Remove" onclick="removeMe('$customerID','$productID')">
<input type="button" name="insert" Value="Insert" onclick="insertMe('$customerID','$productID')">

<input type="submit" name="submit" value="Submit">
</form>
</body>

-1

আপনি যদি সত্যিই একাধিক ফর্ম (জেসন সুজেট হিসাবে) ব্যবহার করতে না চান তবে বোতাম এবং অনক্লিক হ্যান্ডলারগুলি ব্যবহার করুন।

<form id='form' name='form' action='path/to/add/edit/blog' method='post'>
    <textarea name='message' id='message'>Blog message here</textarea>
    <input type='submit' id='save' value='Save'>
</form>
<button id='delete'>Delete</button>
<button id='cancel'>Cancel</button>

এবং তারপরে জাভাস্ক্রিপ্টে (আমি এখানে স্বাচ্ছন্দ্যের জন্য jQuery ব্যবহার করি) (যদিও এটি কিছু অনক্লিক হ্যান্ডলার যোগ করার জন্য বেশ ওভারকিল)

$('#delete').click( function() {
   document.location = 'path/to/delete/post/id'; 
});
$('#cancel').click( function() {
   document.location = '/home/index';
});

এছাড়াও আমি জানি, এটি অর্ধেক পৃষ্ঠাটি জাভাস্ক্রিপ্ট ছাড়া কাজ করবে না।


1
আমি যদি কিছু উপেক্ষা না করি তবে এটি মুছে ফেলার ক্রিয়াটির সাথে যুক্ত হওয়ার চেয়ে ভাল আর নয়: শেষের ফলাফলটি মুছে ফেলার ক্রিয়া (খারাপ) এর জন্য জিইটি অনুরোধ হবে। প্রকৃতপক্ষে এটি কিছুটা গ্রোসার, যেহেতু একটি সাধারণ পুরানো লিঙ্ক ট্যাগটি করতে পারে এমন কিছু করতে জাভাস্ক্রিপ্টের প্রয়োজন।
কাইল ফক্স

-1

ইয়ার তার নিজের উত্তরের মন্তব্যে পোস্ট করা প্রশ্নের জবাবে আমি কিছু জাভাস্ক্রিপ্ট উপস্থাপন করেছি যা একটি আইফ্রেমে আকার পরিবর্তন করবে। ফর্ম বোতামের ক্ষেত্রে, iframe একই ডোমেনে থাকবে তা ধরে নেওয়া নিরাপদ। এই কোডটি আমি ব্যবহার করি। আপনাকে নিজের সাইটের জন্য গণিত / ধ্রুবক পরিবর্তন করতে হবে:

function resizeIFrame(frame)
{
    try {
        innerDoc = ('contentDocument' in frame) ? frame.contentDocument : frame.contentWindow.document;
        if('style' in frame) {
            frame.style.width = Math.min(755, Math.ceil(innerDoc.body.scrollWidth)) + 'px';
            frame.style.height = Math.ceil(innerDoc.body.scrollHeight) + 'px';
        } else {
            frame.width = Math.ceil(innerDoc.body.scrollWidth);
            frame.height = Math.ceil(innerDoc.body.scrollHeight);
        }
    } catch(err) {
        window.status = err.message;
    }
}

তারপরে এটিকে কল করুন:

<iframe ... frameborder="0" onload="if(window.parent && window.parent.resizeIFrame){window.parent.resizeIFrame(this);}"></iframe>

-1

আমি সবেমাত্র jquery দিয়ে এটি করার একটি দুর্দান্ত উপায় নিয়ে এসেছি।

<form name="mainform">    
    <div id="placeholder">
    <div>
</form>

<form id="nested_form" style="position:absolute">
</form>

<script>
   $(document).ready(function(){
      pos = $('#placeholder').position();
      $('#nested_form')
         .css('left', pos.left.toFixed(0)+'px')
         .css('top', pos.top.toFixed(0)+'px');
   });
</script>

-1

ঠিক আছে, আপনি যদি কোনও ফর্ম জমা দেন তবে ব্রাউজার একটি ইনপুট জমা দেওয়ার নাম এবং মানও প্রেরণ করে। সুতরাং আপনি কি করতে পারেন

<form   
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"  
method="post">  

    <input type="text" name="foo" /> <!-- several of those here -->  
    <div id="toolbar">
        <input type="submit" name="action:save" value="Save" />
        <input type="submit" name="action:delete" value="Delete" />
        <input type="submit" name="action:cancel" value="Cancel" />
    </div>
</form>

সার্ভারের দিক থেকে আপনি কেবলমাত্র পরামিতি সন্ধান করেন যা প্রস্থের স্ট্রিং "ক্রিয়া:" শুরু করে এবং বাকী অংশটি আপনাকে কী পদক্ষেপ নিতে হবে তা বলে দেয়

সুতরাং যখন আপনি বাটনে ক্লিক করুন সেভ ব্রাউজার আপনাকে foo = এস্যাসেড এবং ক্রিয়া: সংরক্ষণ = সংরক্ষণের মতো কিছু পাঠায়


-1

ব্যক্তি কোন ফর্মটি করতে চেয়েছিল তার উপর নির্ভর করে আমি একটি চেকবক্স অন্তর্ভুক্ত করে বিষয়টি ঘুরেছিলাম। তারপরে পুরো ফর্মটি জমা দেওয়ার জন্য 1 টি বোতাম ব্যবহার করুন।


2
স্ট্যাক ওভারফ্লোতে আপনাকে স্বাগতম । আপনি কী করেছেন কেবল তা বলার চেয়ে এটি কীভাবে সমস্যা সমাধান করে তা বর্ণনা করা আরও ভাল। স্ট্যাক ওভারফ্লোতে দুর্দান্ত উত্তর তৈরির টিপসের জন্য কীভাবে উত্তর দেবেন তা দেখুন । ধন্যবাদ!
কান্টাস 94 ভারী

-2

বিকল্পভাবে আপনি ফ্লাইতে অ্যাক্টিওব ফর্মটি বরাদ্দ করতে পারেন ... এটি সেরা সমাধান নাও হতে পারে তবে এটি অবশ্যই সার্ভার-সাইড যুক্তি উপশম করবে ...

<form name="frm" method="post">  
    <input type="submit" value="One" onclick="javascript:this.form.action='1.htm'" />  
    <input type="submit" value="Two" onclick="javascript:this.form.action='2.htm'" />  
</form>

কেন? আমি গুরুত্ব সহকারে জিজ্ঞাসা করছি, কারণ কোন বোতামটি ক্লিক করা হয়েছিল তার সহজ কোনও উপায় নেই you আপনি কি বলছেন যে বোতামের অনক্লিক হ্যান্ডলারটি সেট করতে jQuery এর ক্লিক () পদ্ধতির মতো কিছু ব্যবহার করা উচিত? অথবা ফর্মটি জমা দেওয়ার আগে ক্লিক ইভেন্টটি পরিচালনা করা সমস্যা?
জ্যাক মরিস
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.