आप HTML फ़ॉर्म नेस्टिंग सीमा को कैसे पार करेंगे?

Question

मुझे पता है कि एक्सएचटीएमएल नेस्टेड फॉर्म टैग का समर्थन नहीं करता है और मैंने इस विषय के बारे में स्टैक ओवरफ्लो पर अन्य उत्तर पहले ही पढ़ लिए हैं, लेकिन मैंने अभी भी समस्या का एक सुरुचिपूर्ण समाधान नहीं निकाला है।

कुछ लोग कहते हैं कि आपको इसकी आवश्यकता नहीं है और वे सोच भी नहीं सकते कि यह एक ऐसा परिदृश्य है जिसकी आवश्यकता होगी। खैर, व्यक्तिगत रूप से मैं ऐसे परिदृश्य के बारे में नहीं सोच सकता, जिसकी मुझे आवश्यकता नहीं है।

आइए देखें एक बहुत ही सरल उदाहरण:

आप एक ब्लॉग ऐप बना रहे हैं और आपके पास नई पोस्ट बनाने के लिए कुछ फ़ील्ड्स के साथ एक फॉर्म है और "एक्शन" जैसे "सेव", "डिलीट", "कैंसल" जैसे टूलबार हैं।

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

हमारा उद्देश्य इस तरह से फॉर्म को लिखना है जिसमें जावास्क्रिप्ट की आवश्यकता नहीं है , बस सादे पुराने HTML फॉर्म और बटन सबमिट करें।

चूंकि एक्शन URL फॉर्म टैग में परिभाषित किया गया है और प्रत्येक व्यक्ति सबमिट बटन में नहीं है, हमारा एकमात्र विकल्प जेनेरिक URL पर पोस्ट करना है और फिर बटन का नाम निर्धारित करने के लिए "यदि ... फिर ... और" शुरू करना है सबमिट किया गया था। बहुत सुंदर नहीं है, लेकिन हमारी एकमात्र पसंद है, क्योंकि हम जावास्क्रिप्ट पर भरोसा नहीं करना चाहते हैं।

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

आप कह सकते हैं "बस सबमिट के बजाय लिंक के रूप में" हटाएं "को लागू करें"। यह इतने सारे स्तरों में गलत होगा, लेकिन सबसे महत्वपूर्ण बात यह है कि यहां "हटाएं" जैसे साइड-इफेक्ट क्रियाएं कभी भी GET अनुरोध नहीं होनी चाहिए।

तो मेरा प्रश्न (विशेष रूप से उन लोगों के लिए जो कहते हैं कि उन्हें घोंसले के शिकार की आवश्यकता नहीं है) आप क्या करते हैं? क्या कोई सुंदर समाधान है जो मुझे याद आ रहा है या नीचे की रेखा वास्तव में "या तो जावास्क्रिप्ट की आवश्यकता है या सब कुछ सबमिट करें"?

Comments

यह मज़ेदार है, लेकिन एक्सएचटीएमएल दिलचस्प नोट के अनुसार अप्रत्यक्ष रूप से घोंसले के शिकार की अनुमति देता है। anderwald.info/internet/nesting-form-tags-in-xhtml - (X) HTML "फ़ॉर्म> फ़ॉर्म" जैसे घोंसले के शिकार रूपों को अस्वीकार करता है, लेकिन "फ़ॉर्म> फ़ील्डसेट> की अनुमति देता है फ़ॉर्म ", W3 सत्यापनकर्ता का कहना है कि यह मान्य है, लेकिन ब्राउज़र में ऐसे घोंसले के शिकार कीड़े हैं।

— निशी

क्या यह

— कास्त्रो रॉय

लिंकशीट फिक्स @ निशी की टिप्पणी के लिए लिंक: web.archive.org/web/20170420110433/http://anderwald.info/…

— albert

Answer 1

मैं इसे ठीक उसी तरह लागू करूंगा, जैसा आपने वर्णित किया है: सर्वर को सबकुछ सबमिट करें और एक साधारण से करें / जाँच करें कि क्या बटन क्लिक किया गया था।

और फिर मैं एक जावास्क्रिप्ट कॉल को फॉर्म के ऑनसुबमिट घटना में बांधने को लागू करूंगा, जो फॉर्म सबमिट होने से पहले जांच करेगा, और केवल संबंधित डेटा को सर्वर पर सबमिट करेगा (संभवत: पृष्ठ पर दूसरे फॉर्म के माध्यम से आईडी के साथ चीज़ को संसाधित करने के लिए आवश्यक है) एक छिपा हुआ इनपुट, या जीएटी अनुरोध के रूप में आपके द्वारा पारित डेटा के साथ पृष्ठ स्थान को ताज़ा करें, या सर्वर पर एक अजाक्स पोस्ट करें, या ...)।

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

वैकल्पिक रूप से, यदि आप कॉर्पोरेट फ़ायरवॉल या किसी चीज़ के पीछे काम कर रहे हैं और हर किसी के पास जावास्क्रिप्ट अक्षम है, तो हो सकता है कि आप दो रूपों को करना चाहते हों और कुछ CSS जादू काम करना चाहते हों जैसे कि डिलीट बटन पहले फ़ॉर्म का हिस्सा है।

Comments

ओपी मूल ने कहा कि कोई जावास्क्रिप्ट नहीं है

— जेसन

इस विधि के साथ समस्या यह है कि यह गैर RESTful है। संसाधन पर विभिन्न कार्यों के लिए एक सहेजें और हटाएं: "सहेजें" -> POST / my_resource (नया संसाधन बनाना) "सहेजें" -> PUT / my_resource (मौजूदा संसाधन को संशोधित करना) "हटाएं" -> DELETE / my_resource (नष्ट करें) संसाधन) उत्साहपूर्वक बोलना, समस्या यह है कि एक POST एक नया संसाधन बनाने की उम्मीद है। निश्चित रूप से इसे मौजूदा संसाधन को कभी नहीं हटाना चाहिए।

— user132447

Answer 2

मुझे पता है कि यह एक पुराना सवाल है, लेकिन एचटीएमएल 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>

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

<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

इन नई सुविधाओं का लाभ यह है कि वे यह सब कुछ जावास्क्रिप्ट के बिना घोषित रूप से करते हैं। नुकसान यह है कि वे पुराने ब्राउज़रों पर समर्थित नहीं हैं, इसलिए आपको पुराने ब्राउज़रों के लिए कुछ पॉलीफिलिंग करना होगा।

Comments

+1 - लेकिन यह जानना प्यारा होगा कि ब्राउज़र का समर्थन क्या form=है - CanIUse वास्तव में नहीं कहता है। caniuse.com/#feat=forms

— AKX

सही यह उत्कृष्ट है, लेकिन आज के रूप में IE द्वारा समर्थित नहीं एक सुविधा अभी भी 'उत्पादन' के उपयोग के लिए इसे अयोग्य घोषित करती है

— जाको

<input>बटन घोषित करने के लिए उपयोग करना बुरा है । <button>तत्व 15 साल पहले इस उद्देश्य के लिए शुरू की गई थी। वास्तव में लोग।

— निकोलस शैंक्स

आपकी बात अनावश्यक रूप से विवादास्पद है और ओपी के सवाल के लिए अप्रासंगिक है। ओपी ने जावास्क्रिप्ट का उपयोग किए बिना फॉर्म नेस्टिंग सीमा के बारे में पूछा और जवाब एक समाधान प्रदान करता है। चाहे आप उपयोग करें <input>या <button>तत्व अप्रासंगिक हों, हालाँकि टूलबार के लिए बटन आमतौर पर अधिक उपयुक्त होते हैं, जैसा कि आप कहते हैं। वैसे, 15 वर्षों से सभी ब्राउज़रों द्वारा बटन तत्वों का समर्थन नहीं किया गया है।

— शोवनिक

@AKX हालांकि एक पुराना कथन है, आप यहाँ इस सुविधा के लिए समर्थन देख सकेंगे: html5test.com/compare/feature/form-association-form.html । IE एक लेखन-बंद है, अधिकांश अन्य डेस्कटॉप ब्राउज़र सहनीय लगते हैं।

— फैटी

Answer 3

क्या आपके पास पेज पर साइड फॉर्म हो सकते हैं, लेकिन नेस्टेड नहीं। तो सीएसएस का उपयोग करने के लिए सभी बटन लाइन सुंदर बनाने के लिए?

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

Comments

हाँ और यह भी लगता है कि hackish है। प्लस एक बहुत बड़े पृष्ठ में (टैब और सब-टैब्स की कल्पना करें और नेस्टिंग को कई स्कोप स्तरों में बटन सबमिट करें) दस्तावेज़ में अपनी स्थिति से तत्वों की स्क्रीन स्थिति को पूरी तरह से अलग करना लगभग असंभव है।

— gCoder

खैर, इसका हमेशा एक संतुलन है कि आप क्या करना चाहते हैं और आप क्या कर सकते हैं। ऐसा लगता है कि वे विकल्प हैं - या तो एक फॉर्म सर्वर पर संभाला जाता है, या एक से अधिक कई रूपों को बनाए रखना मुश्किल हो जाता है - बुद्धिमानी से चुनें :)

— जेसन

हां, दुर्भाग्यवश html में उन सभी सीमाओं के साथ, मैं बस उस चीज़ से जुड़ा रहूँगा जो सर्वर को भेजती है और पूरे फॉर्म को सर्वर को भेजती है और बाद में जावास्क्रिप्ट का उपयोग क्लाइंट के लिए विनीत रूप से करती है जो इसे फॉर्म सबमिशन को इंटरसेप्ट करने के लिए समर्थन करते हैं और केवल वही भेजते हैं जो वास्तव में जरूरी है। यही सबसे अच्छा समझौता है।

— gCoder

Answer 4

एचटीएमएल 5 में "फॉर्म ओनर" का एक विचार है - इनपुट तत्वों के लिए "फॉर्म" विशेषता। यह नेस्टेड रूपों का अनुकरण करने की अनुमति देता है और इस मुद्दे को हल करेगा।

Comments

इस लिंकिंग के लायक कोई संदर्भ?

— dakab

W3.org/TR/html5/forms.html#form-owner देखें "एक प्रपत्र-संबद्ध तत्व डिफ़ॉल्ट रूप से, अपने निकटतम पूर्वज फार्म तत्व के साथ जुड़ा हुआ है, लेकिन, यदि यह पुनर्मूल्यांकन योग्य है, तो ओवरराइड के लिए निर्दिष्ट प्रपत्र विशेषता हो सकती है यह।"

— निशि

Answer 5

पुराने विषय की तरह, लेकिन यह किसी के लिए उपयोगी हो सकता है:

जैसा कि ऊपर किसी ने उल्लेख किया है - आप डमी फॉर्म का उपयोग कर सकते हैं। मुझे कुछ समय पहले इस मुद्दे को दूर करना था। सबसे पहले मैं इस HTML प्रतिबंध के बारे में पूरी तरह से भूल गया और सिर्फ नेस्टेड रूपों को जोड़ा। परिणाम दिलचस्प था - मैं नेस्टेड से अपना पहला रूप खो दिया। फिर यह वास्तविक नेस्टेड रूपों से पहले एक डमी फॉर्म (जो ब्राउज़र से हटा दिया जाएगा) को जोड़ने के लिए किसी तरह की "चाल" निकला।

मेरे मामले में यह इस तरह दिखता है:

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

Chrome, FireFox और Safari के साथ ठीक काम करता है। 9 तक IE (10 के बारे में निश्चित नहीं) और ओपेरा मुख्य रूप में मापदंडों का पता नहीं लगाता है। $ _REQUEST वैश्विक इनपुटों की परवाह किए बिना रिक्त है। आंतरिक रूप हर जगह ठीक काम करने लगता है।

यहां वर्णित एक अन्य सुझाव का परीक्षण नहीं किया गया है - नेस्टेड रूपों के आसपास फ़ील्डसेट।

संपादित करें : फ्रेमसेट काम नहीं किया! मैंने केवल मुख्य रूप को अन्य (नो नस्टेड फॉर्म) के बाद जोड़ा और बटन क्लिक के रूप में इनपुट में डुप्लिकेट करने के लिए jQuery के "क्लोन" का उपयोग किया। जोड़ा गया .hide () लेआउट को अपरिवर्तित रखने के लिए क्लोन किए गए प्रत्येक इनपुट के लिए और अब यह एक आकर्षण की तरह काम करता है।

Comments

इसने मेरे लिए पूरी तरह से काम किया। मैं एक asp.net पेज पर काम कर रहा था, जिसमें ऑल-एनक्लोजिंग फॉर्म था। मेरे पास jQuery Validation plugin ( github.com/jzaefferer/jquery-validation ) के लिए उपयोग करने के लिए एक आंतरिक नेस्टेड रूप था , और जब तक कि यह पूरी तरह से FireFox और IE में काम करता था, तब यह Chrome में 'TypeError:' कॉल 'विधि' तत्व 'को कॉल नहीं कर सका। अपरिभाषित '। वैलिडेटेड () इनिशियलाइज़ेशन कॉल विफल हो रही थी क्योंकि यह आंतरिक रूप नहीं ढूंढ पा रही थी, क्योंकि Chrome ने इसे jQuery.html () का उपयोग करके HTML के ब्लॉक से हटा दिया था। पहले छोटे डमी फॉर्म को जोड़ने से क्रोम असली को छोड़ देता था।

— जॉन -

यह किसी भी अधिक काम नहीं करता है। फ़ायरफ़ॉक्स ने दूसरे <फॉर्म> टैग को छीन लिया और फिर पहले </ फॉर्म> टैग के साथ मेरे फॉर्म को समाप्त कर दिया। इसने पृष्ठ के निचले भाग में एक अमान्य </ form> टैग छोड़ा और ऐसा फ़ॉर्म जो सही तरीके से सबमिट नहीं होगा। :(

— तारकिन

मेरे लिए बहुत उपयोगी है। मैं एक वेब विजेट जोड़ रहा हूं जिसमें एक asp.net पेज है। WebForm द्वारा आश्चर्य की बात है कि यह हमेशा HTML बॉडी में सब कुछ घेरने वाला एक फॉर्म जनरेट करता है। संलग्नक प्रपत्र वेब विजेट के लिए सिरदर्द बन जाता है। डमी फॉर्म इस स्थिति के लिए एक त्वरित और प्रभावी समाधान लगता है। यह अभी तक क्रोम और सफारी में पूरी तरह से काम करता है, अभी तक फ़ायरफ़ॉक्स का परीक्षण नहीं किया है। साझा करने के लिए धन्यवाद, मुझे बहुत समय बचा लिया!

— जेएम यांग

Answer 6

मुझे लगता है कि जेसन का अधिकार। यदि आपकी "हटाएं" कार्रवाई एक न्यूनतम है, तो इसे स्वयं के रूप में बनाएं, और इसे अन्य बटनों के साथ पंक्तिबद्ध करें ताकि इंटरफ़ेस एक एकीकृत रूप की तरह दिखाई दे, भले ही वह ऐसा न हो।

या, ज़ाहिर है, अपने इंटरफ़ेस को फिर से डिज़ाइन करें, और लोगों को कहीं और पूरी तरह से हटाने दें, जिसके लिए उन्हें ऑवरो-फॉर्म को देखने की आवश्यकता नहीं है।

Answer 7

जावास्क्रिप्ट के बिना ऐसा करने का एक तरीका रेडियो बटन का एक सेट जोड़ना होगा जो कि कार्रवाई किए जाने को परिभाषित करता है:

• अपडेट करें
• हटाएं
• जो कुछ

तब एक्शन स्क्रिप्ट रेडियो बटन सेट के मूल्य के आधार पर अलग-अलग कार्रवाई करेगी।

एक और तरीका यह होगा कि आप सुझाव के रूप में पेज पर दो फॉर्म रखें, बस नेस्टेड न हो। हालांकि लेआउट को नियंत्रित करना मुश्किल हो सकता है:

<form name = "editform" क्रिया = "the_action_url" विधि = "पोस्ट">
   <इनपुट प्रकार = "छिपा हुआ" नाम = "कार्य" मान = "अपडेट" />
   <इनपुट प्रकार = "टेक्स्ट" नाम = "फू" />
   <इनपुट प्रकार = "सबमिट" नाम = "सहेजें" मूल्य = "सहेजें" />
</ Form>

<form name = "delform" क्रिया = "the_action_url" विधि = "पोस्ट">
   <इनपुट प्रकार = "छिपा हुआ" नाम = "कार्य" मान = "हटाएं" />
   <इनपुट प्रकार = "छिपा हुआ" नाम = "पोस्ट_ड" मान = "5" />
   <इनपुट प्रकार = "सबमिट" नाम = "हटाएं" मूल्य = "हटाएं" />
</ Form>

हैंडलिंग स्क्रिप्ट में छिपी "कार्य" फ़ील्ड का उचित रूप से उपयोग करना।

Answer 8

यह चर्चा अभी भी मेरे लिए दिलचस्पी की है। मूल पोस्ट के पीछे "आवश्यकताएं" हैं जो ओपी साझा करने के लिए लगता है - यानी बैकवर्ड संगतता के साथ एक रूप। किसी ऐसे व्यक्ति के रूप में जिसका काम लिखने के समय कभी-कभी IE6 (और आने वाले वर्षों के लिए) का समर्थन करना चाहिए, मैं इसे खोदता हूं।

फ्रेमवर्क को धक्का दिए बिना (सभी संगठन संगतता / मजबूती पर खुद को आश्वस्त करना चाहते हैं, और मैं इस चर्चा को ढांचे के औचित्य के रूप में उपयोग नहीं कर रहा हूं), इस मुद्दे के Drupal समाधान दिलचस्प हैं। ड्रुपल भी सीधे प्रासंगिक है क्योंकि फ्रेमवर्क की लंबे समय से नीति है "यह जावास्क्रिप्ट के बिना काम करना चाहिए (केवल अगर आप चाहते हैं)" अर्थात ओपी का मुद्दा।

Drupal इसका उपयोग व्यापक रूप में करता है। यह ट्रिगरिंग_लेमेंट (हां, कोड में नाम है) को खोजने के लिए व्यापक रूप से तैयार की जाती है । फ़ॉर्म_बिल्डर के लिए एपीआई पृष्ठ पर सूचीबद्ध कोड के नीचे देखें (यदि आप विवरण में खुदाई करना चाहते हैं, तो स्रोत की सिफारिश की गई है - drupal-x.xx / शामिल / form.inc )। बिल्डर स्वचालित HTML विशेषता पीढ़ी का उपयोग करता है और, इसके माध्यम से, वापसी का पता लगा सकता है कि कौन सा बटन दबाया गया था, और तदनुसार कार्य करें (इन्हें अलग-अलग प्रक्रियाएं चलाने के लिए भी सेट किया जा सकता है)।

फॉर्म बिल्डर से परे, Drupal अलग-अलग urls / फ़ॉर्म में डेटा 'डिलीट' क्रियाओं को विभाजित करता है, मूल पोस्ट में उल्लिखित कारणों के लिए। यह कुछ / चरण सूची खोज की तरह की जरूरत है ( कराह दूसरा रूप !, लेकिन उपयोगकर्ता के अनुकूल है) एक प्रारंभिक के रूप में। लेकिन इससे "सब कुछ सबमिट करें" समस्या को समाप्त करने का लाभ है। डेटा के साथ बड़ा रूप इसका उपयोग अभीष्ट उद्देश्य, डेटा निर्माण / अद्यतन (या 'मर्ज' क्रिया) के लिए किया जाता है।

दूसरे शब्दों में, समस्या के दौर में काम करने का एक तरीका फ़ॉर्म को दो में बदलना है, फिर समस्या गायब हो जाती है (और HTML विधियों को POST के माध्यम से भी ठीक किया जा सकता है)।

Answer 9

iframeनेस्टेड फॉर्म के लिए उपयोग करें । यदि उन्हें फ़ील्ड साझा करने की आवश्यकता है, तो ... यह वास्तव में नेस्टेड नहीं है।

Comments

एक आइफ्रेम का उपयोग करना एक महान विचार है, यह सिर्फ एक शर्म की बात है कि ज्यादातर मामलों में आपको इसे आकार देने के लिए जावास्क्रिप्ट की आवश्यकता होगी (क्योंकि आप नहीं जान सकते कि उपयोगकर्ता का पाठ आकार क्या होगा, इसलिए, बटन कितना बड़ा होगा)।

— निकोलस शैंक्स

@ निकोलस, आप इसे आकार देने के लिए जावास्क्रिप्ट का उपयोग कैसे कर सकते हैं? Iframed HTML iframe, और इसके विपरीत बात नहीं कर सकता, जब तक कि वे एक ही डोमेन पर न हों।

— डैन रोसेनस्टार्क 14

@ नाइकोलस, धन्यवाद, बस यह सुनिश्चित करना चाहते थे कि उन्हें एक ही डोमेन में होना चाहिए

— Dan Rosenstark

Answer 10

मेरे समाधान के लिए जेएस फ़ंक्शंस के बटन हैं जो लिखते हैं और फिर मुख्य फ़ॉर्म के साथ फ़ॉर्म सबमिट करते हैं

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

Answer 11

यदि आप वास्तव में कई रूपों (जैसे जेसन सुगर) का उपयोग नहीं करना चाहते हैं, तो बटन और ऑनक्लिक हैंडलर का उपयोग करें।

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

मुझे यह भी पता है, यह आधे पृष्ठ को जावास्क्रिप्ट के बिना काम नहीं करेगा।

Comments

जब तक मैंने कुछ अनदेखा नहीं किया है, यह डिलीट एक्शन से जुड़ने से बेहतर नहीं है: अंतिम परिणाम डिलीट एक्शन (खराब) के लिए एक जीईटी अनुरोध होगा। वास्तव में यह थोड़ा ग्रॉसर है, क्योंकि इसमें जावास्क्रिप्ट की आवश्यकता होती है ताकि एक सादा पुराना लिंक टैग किया जा सके।

— काइल लोमड़ी

Answer 12

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

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>

Answer 13

मैं बस 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>

Answer 14

ठीक है, यदि आप एक फॉर्म सबमिट करते हैं, तो ब्राउज़र इनपुट सबमिट नाम और मूल्य भी भेजता है। तो यो क्या कर सकता है

<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 = asd & action जैसी कोई चीज़ भेजता है: सहेजें = सहेजें

Answer 15

मैं एक चेकबॉक्स को शामिल करके समस्या के आसपास गया था कि व्यक्ति किस रूप में करना चाहता था। फिर पूरे फॉर्म को जमा करने के लिए 1 बटन का उपयोग किया।

Comments

ढेर अतिप्रवाह में आपका स्वागत है । यह वर्णन करना बेहतर है कि यह समस्या को हल कैसे करता है, बजाय यह कहने के कि आपने क्या किया। स्टैक ओवरफ्लो पर शानदार उत्तर बनाने के सुझावों के लिए कैसे देखें । धन्यवाद!

— Qantas 94 हेवी

Answer 16

वैकल्पिक रूप से आप फ़्लाई पर एक्टिओब असाइन कर सकते हैं ... सबसे अच्छा समाधान नहीं हो सकता है, लेकिन निश्चित रूप से सर्वर-साइड को राहत देता है ...

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

Comments

क्यों? मैं गंभीरता से पूछ रहा हूं, क्योंकि बटन को क्लिक करने का कोई आसान तरीका नहीं है। क्या आप कह रहे हैं कि बटन के ऑनक्लिक हैंडलर को सेट करने के लिए jQuery की क्लिक () विधि जैसी किसी चीज का उपयोग किया जाना चाहिए? या फॉर्म सबमिट करने से पहले क्लिक इवेंट को हैंडल करना समस्या है?

— ज़ैक मॉरिस