<फॉर्म> टैग के बाहर एक बटन का उपयोग करके फ़ॉर्म सबमिट करें

Question

कहो मेरे पास:

<form method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" />

मैं फॉर्म के बाहर उस सबमिट बटन के साथ उस फ़ॉर्म को सबमिट करने के बारे में कैसे जाऊंगा, मुझे लगता है कि एचटीएमएल 5 सबमिट के लिए एक एक्शन विशेषता देता है, लेकिन मुझे यकीन नहीं है कि यदि पूरी तरह से क्रॉस-ब्राउज़र और अगर यह वैसे भी नहीं है, तो यह करो?

Comments

मुझे नहीं लगता कि आप जावास्क्रिप्ट के बिना ऐसा कर सकते हैं। ब्राउज़र को कैसे पता चलेगा कि यह किस रूप में है? कई हो सकते हैं। आप फॉर्म के अंदर सबमिट बटन क्यों नहीं डाल सकते हैं?

— कीथ

यदि आप JS का उपयोग नहीं करना चाहते हैं तो मेरे लिए यह HTML में असंभव लग रहा है (<5), बस जिज्ञासा से बाहर, आप कोड में इस तरह की व्यवस्था क्यों करेंगे?

— कुमार

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

— daryl

@ कुमार, मैंने यह भी सोचा कि यह असंभव होगा, लेकिन ऐसा लगता है कि यह stackoverflow.com/a/23456905/932473

— dav

आजकल इसका उत्तर है डेवलपर।

— pmillailla.org/en-US/docs/Web/HTML/Element/…

Answer 1

अपडेट: आधुनिक ब्राउज़रों में आप ऐसा करने के लिए formविशेषता का उपयोग कर सकते हैं ।

---

जहाँ तक मुझे पता है, आप जावास्क्रिप्ट के बिना ऐसा नहीं कर सकते।

यहाँ क्या युक्ति है कहते हैं

नियंत्रण बनाने के लिए उपयोग किए जाने वाले तत्व आम तौर पर एक FORM तत्व के अंदर दिखाई देते हैं, लेकिन उपयोगकर्ता इंटरफ़ेस बनाने के लिए उपयोग किए जाने पर FORM तत्व घोषणा के बाहर भी दिखाई दे सकते हैं। यह आंतरिक घटनाओं पर अनुभाग में चर्चा की गई है। ध्यान दें कि किसी प्रपत्र के बाहर नियंत्रण सफल नियंत्रण नहीं हो सकता है।

वह मेरा बोल्ड है

एक submitबटन को एक नियंत्रण माना जाता है।

http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1

टिप्पणियों से

मेरे पास सभी को अपडेट करने के लिए एक बटन के साथ एक बहु टैब्ड सेटिंग्स क्षेत्र है, इसके डिजाइन के कारण बटन फॉर्म के बाहर होगा।

inputफॉर्म को अंदर क्यों न रखें , लेकिन पृष्ठ पर इसे कहीं और रखने के लिए CSS का उपयोग करें?

Comments

FYI करें, HTML5 समर्थन, अभी तक सही नहीं है, लेकिन यह वहां हो रहा है: प्रभावशाली

— webs.com/html5-form-attribute

मैं यहाँ थोड़ा लेट हूँ, लेकिन आप इनपुट को फॉर्म में कैसे डाल सकते हैं, लेकिन इसे कहीं और रखें?

— cgf

आप html4 के लिए इस बटन के लिए <बटन> टैग का उपयोग कर सकते हैं

— degr

उत्तर अब मान्य नहीं है, जो जो गिलहरी के जवाब का काम करता है - 2016 तक।

— पीटर

प्रस्तावित जावास्क्रिप्ट समाधान के साथ एक चिंता का विषय है। नवीनतम Chrome में उदाहरण के लिए, HTML5 सत्यापन (आवश्यक, आदि) छोड़ दिया गया है। एक समाधान मैं सोच सकता हूँ कि दो सबमिट बटन हैं, एक छिपा हुआ है। छिपे हुए बटन पर एक क्लिक को चालू किया जाना चाहिए। उचित सत्यापन के बिना फॉर्म जमा नहीं किया जाना चाहिए।

— विजेता n।

Answer 2

HTML5 में, प्रपत्र विशेषता है । मूल रूप से

<form id="myform" method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" />

Comments

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

— racl101

वास्तव में कौन से IE संस्करण?

— mwld

मैंने इसे एक सुंदर कमबैक के <button type="submit" form="frmFoo" onclick="!this.form&&$('#'+$(this).attr('form')).submit()">रूप में किया : जैसा कि प्रयोगों से पता चला है, यह संलग्न फॉर्म डोमेमेंट है, जबकि यह अन्यथा अशक्त है। // संपादित करें: jQuery, लेकिन वेनिला के साथ संभव है, बहुत अधिक

— ofc

यदि आप MS Edge में फॉर्म की विशेषता देखना चाहते हैं तो कृपया यहाँ वोट करें: wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…

— mkurz

@ एड्रियनफॉडर फॉलबैक का एक वैनिला-जेएस संस्करण होगा:<button type="submit" form="frmFoo" onclick="!this.form && document.getElementById('myform').submit()">

— रोमारिकड्रिगॉन

Answer 3

एक समाधान जो मेरे लिए बहुत अच्छा काम करता है, अभी भी यहां गायब है। यह एक नेत्रहीन छिपा <submit>या <input type="submit">तत्व whithin की आवश्यकता है <form>, और <label>इसके बाहर एक संबद्ध तत्व। यह इस तरह दिखेगा:

<form method="get" action="something.php">
     <input type="text" name="name" />
     <input type="submit" id="submit-form" class="hidden" />
</form>

<label for="submit-form" tabindex="0">Submit</label>

अब यह लिंक आपको <submit>तत्व पर क्लिक करके तत्व को 'क्लिक' करने में सक्षम करता <label>है।

Comments

बेहतर समाधान imho बिना जेएस और बड़े बदलाव की आवश्यकता :)

— एंटोन हसन

IE 11 में भी काम करता है। मुझे पता है, आप अक्सर एक ही वाक्य में "कार्य" और "IE" नहीं देखते हैं।

— शिम

बिना किसी असंगति के बेहतर समाधान। यदि Twitter बूटस्ट्रैप का उपयोग कर रहा है, तो आप लेबल css वर्ग के लिए बस "btn btn-Primary" का उपयोग कर सकते हैं और यह सही काम करता है।

— जुंडा

बहुत अच्छा समाधान, हालांकि इस पद्धति का उपयोग करने में एक आपत्ति हो सकती है। A ध्यान देने labelयोग्य तत्व नहीं है (AFAIK) इसलिए यह उस उपयोगकर्ता के लिए सहज नहीं है जो केवल 'बटन' पर नेविगेट करने के लिए कीबोर्ड का उपयोग कर रहा है और फिर उदाहरण के लिए उस बटन को सक्रिय करने के लिए स्पेस दबाएं। (मुझे लगता है कि आप <enter>इसके बजाय प्रेस कर सकते हैं , लेकिन यह एकमात्र तरीका नहीं है कि लोगों को कीबोर्ड के साथ रूपों को नेविगेट करने के लिए उपयोग किया जाता है)

— Auke

labelटैब बटन के माध्यम से ध्यान केंद्रित करने के लिए , आप tabindexHTML विशेषता का उपयोग कर सकते हैं : इस प्रश्न के<label for="submit-form" tabindex="0">Submit</label> अनुसार

— MarthyM

Answer 4

यदि आप jQuery का उपयोग कर सकते हैं तो आप इसका उपयोग कर सकते हैं

<form method="get" action="something.php" id="myForm">
    <input type="text" name="name" />

    <input type="submit" style="display:none" />
</form>

<input type="button" value="Submit" id="myButton" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#myButton").click(function() {
           $("#myForm").submit();
       });
    });
</script>

तो, निचली पंक्ति सबमिट की तरह एक बटन बनाने के लिए है, और फॉर्म में वास्तविक सबमिट बटन डालें (निश्चित रूप से इसे छिपाते हुए), और 'फेक सबमिट' बटन पर क्लिक करके jquery द्वारा फॉर्म सबमिट करें। आशा है ये मदद करेगा।

Comments

इसे HTML5 तैयार ब्राउज़र और IE दोनों पर काम करने के लिए, यहाँ मेरा jQuery है$('button[form]').click(function (){ var formId = $(this).attr('form'); $('#' + formId).submit(); });

— स्नूका

Answer 5

<form method="get" id="form1" action="something.php">

</form>

<!-- External button-->
<button type="submit" form="form1">Click me!</button>

यह मेरे लिए काम करता है, एक फॉर्म के लिए एक रिमोट सबमिट बटन है।

Comments

धन्यवाद आदमी, इस सरल सुविधा के लिए मैं JS कोड की पंक्तियाँ नहीं लिखना चाहता। PS: मेरे ऐप को IE

— मैनी

कृपया वोट करें यदि आप MS Edge में फ़ीचर विशेषता देखना चाहते हैं: wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…

— mkurz

Answer 6

यहां एक और समाधान के समान, मामूली संशोधन के साथ:

<form method="METHOD" id="FORMID">
   <!-- ...your inputs -->
</form>
<button type="submit" form="FORMID" value="Submit">Submit</button>

https://www.w3schools.com/tags/att_form.asp

Comments

यह सबसे अच्छा जवाब है, IMO। बटन के फॉर्म विशेषता पर एमडीएन से सीधे: बटन के साथ जुड़ा हुआ तत्व तत्व (इसका फॉर्म स्वामी)। विशेषता का मान उसी दस्तावेज़ में <form> तत्व की आईडी विशेषता होना चाहिए। यदि यह विशेषता निर्दिष्ट नहीं है, तो <बटन> तत्व पूर्वज से संबंधित होगा <form> तत्व, यदि कोई मौजूद है। यह विशेषता आपको एक दस्तावेज़ के भीतर <बटन> तत्वों को <form> तत्वों से जोड़ने में सक्षम करती है, न कि केवल <form> तत्वों के वंशज के रूप में।

— एलेक्सशैरेगन

ध्यान रखें: यह इंटरनेट एक्सप्लोरर 11 में काम नहीं करता है। इसे यहां आज़माएं: cdpn.io/mdix/debug/PooPqaM/PNAvYKNJojRr

— मार्क डिक्स

Answer 7

इसे इस्तेमाल करे:

<input type="submit" onclick="document.forms[0].submit();" />

हालांकि मैं सुझाव दूंगा idकि फॉर्म को जोड़ना और इसके बजाय उस तक पहुंच बनाना document.forms[index]।

Comments

हाँ, मुझे पता है कि इसे जावास्क्रिप्ट के साथ कैसे करना है, अगर आप देखें तो मैंने इसे जावास्क्रिप्ट के रूप में टैग नहीं किया है।

— डेरिल

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

— मर्चिफ़

यदि आप किसी अन्य प्रपत्र के अंदर एक बटन का उपयोग करके बाहरी रूप प्रस्तुत करना चाहते हैं तो यह करना सबसे अच्छा तरीका है।

— वाहिद अमीरी

Answer 8

आप हमेशा jQuery का उपयोग कर सकते हैं:

<form id="myForm">
  <!-- form controls -->
</form>
<input type="submit" id="myButton">

<script>
$(document).ready(function () {
  $("#myButton").click(function () {
    $("#myForm").submit();
  });
});
</script>

Answer 9

यहाँ एक बहुत ही ठोस समाधान है जो अब तक के सबसे अच्छे विचारों को शामिल करता है और इसमें एक समस्या का समाधान भी शामिल है जिसमें ऑफ़ेरेन के साथ हाइलाइट किया गया है। कोई जावास्क्रिप्ट का उपयोग नहीं किया जाता है।

यदि आप IE (और यहां तक ​​कि एज 13) के साथ पीछे की संगतता के बारे में परवाह करते हैं, तो आप form="your-form" विशेषता का उपयोग नहीं कर सकते ।

प्रदर्शन के साथ एक मानक सबमिट इनपुट का उपयोग करें और फ़ॉर्म के बाहर इसके लिए एक लेबल जोड़ें:

<form id="your-form">
  <input type="submit" id="your-form-submit" style="display: none;">
</form>

के उपयोग पर ध्यान दें display: none;। यह जानबूझकर किया गया है। बूटस्ट्रैप के .hiddenवर्ग का उपयोग jQuery के साथ .show()और .hide(), बूटस्ट्रैप 4 में पदावनत किया गया है।

अब बस अपने सबमिट के लिए एक लेबल जोड़ें, (बूटस्ट्रैप के लिए स्टाइल):

<label for="your-form-submit" role="button" class="btn btn-primary" tabindex="0">
  Submit
</label>

अन्य समाधानों के विपरीत, मैं tabindex का उपयोग भी कर रहा हूं - 0 पर सेट - जिसका अर्थ है कि हम अब कीबोर्ड टैबिंग के साथ संगत हैं। role="button"विशेषता जोड़ने से यह सीएसएस शैली देता है cursor: pointer। वेटिला। ( यह फील देखें )।

Comments

अच्छा! IE11 और फ़ायरफ़ॉक्स के साथ बढ़िया काम किया। धन्यवाद!

— eaglei22

@ eaglei22 यह सुनकर खुश हो गया :)

— योनातन

आपके लिए अन्य सभी सुविधाओं / सुझावों को एक साथ रखना आपके लिए बहुत मददगार है, इसलिए धन्यवाद। हालाँकि, भले ही अब आप बटन / लेबल पर टैब कर सकते हैं, मैं कीबोर्ड से इसे "क्लिक" करने का कोई तरीका नहीं देख सकता, जैसे कि दबाने Enterका कोई प्रभाव नहीं है। इस प्रकार, इसे टैब करने में सक्षम होना थोड़ा व्यर्थ लगता है। क्या जावास्क्रिप्ट का उपयोग किए बिना ऐसा करने का एक तरीका है?

— एंड्रयू विल्म्स

@AndrewWillems यह एक अच्छी बात है। दुर्भाग्य से मैं जावास्क्रिप्ट के बिना एक क्लिक घटना को ट्रिगर करने के लिए अपने कीबोर्ड का उपयोग करने के आसपास एक रास्ता नहीं देखता। पुनश्च: यदि पोस्ट आपके लिए उपयोगी थी तो कृपया आगे बढ़ें। यह आपको कुछ भी खर्च नहीं करता है, लेकिन इसका मतलब यह है कि जो कोई भी उपयोगी उत्तर देता है।

— जोनाथन

और मैं आपको मैला और अमान्य <input... />स्व-समापन सिंटैक्स को ठीक करने के लिए भी प्यार करता हूं , जो कि हर किसी के बारे में बस गलत तरीके से और गलत तरीके से यहां (बहुत) का उपयोग करते हुए उचित शून्य-बंद टैग के लिए है! :) यारो!

— एस.जे.

Answer 10

यह पूरी तरह से काम! ;)

यह अजाक्स का उपयोग करके किया जा सकता है और जिसे मैं कहता हूं: "एक रूप दर्पण तत्व"। एक तत्व को बाहर भेजने के बजाय, आप एक नकली फॉर्म बना सकते हैं। पिछले फॉर्म की जरूरत नहीं है।

<!-- This will do the trick -->
<div >
    <input id="mirror_element" type="text" name="your_input_name">
    <input type="button" value="Send Form">
</div>

कोड अजाक्स की तरह होगा:

    <script>
        ajax_form_mirror("#mirror_element", "your_file.php", "#your_element_response", "POST");

        function ajax_form_mirror(form, file, element, method) {
            $(document).ready(function() {
                // Ajax
                $(form).change(function() { // catch the forms submit event
                    $.ajax({                // create an AJAX call...
                        data: $(this).serialize(),      // get the form data
                        type: method,                   // GET or POST
                        url: file,                      // the file to call
                        success: function (response) {   // on success..
                        $(element).html(response);  // update the DIV
                        }
                    });

                    return false; // cancel original event to prevent form submitting
                });
            });
        }
   </script>

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

इस कोड को संभवतः जरूरत के अनुसार अनुकूलित / अनुकूलित किया जा सकता है। यह पूरी तरह से काम करता है !! ;) भी काम करता है अगर आप इस तरह एक चयन विकल्प बॉक्स चाहते हैं:

<div>
    <select id="mirror_element" name="your_input_name">
        <option id="1" value="1">A</option>
        <option id="2" value="2">B</option>
        <option id="3" value="3">C</option>
        <option id="4" value="4">D</option>
    </select>
</div>

मुझे उम्मीद है कि इसने मेरी मदद की जैसे किसी ने मदद की। ;)

Answer 11

शायद यह काम कर सकता है, लेकिन मुझे नहीं पता कि यह वैध HTML है या नहीं।

<form method="get" action="something.php">
    <input type="text" name="name" />
    <input id="submitButton" type="submit" class="hide-submit" />
</form>

<label for="submitButton">Submit</label>

Comments

यह प्रश्न पहले से ही इस प्रश्न के लिए मौजूद है। stackoverflow.com/a/23456905/2968465

— जयंत भवाल

Answer 12

मेरे पास एक मुद्दा था जहां मैं तालिका सेल तत्व से फॉर्म को छिपाने की कोशिश कर रहा था, लेकिन फिर भी प्रपत्र सबमिट-बटन दिखाते हैं। समस्या यह थी कि फार्म तत्व अभी भी एक अतिरिक्त रिक्त स्थान ले रहा था, जिससे मेरी तालिका सेल का स्वरूप अजीब लग रहा था। प्रदर्शन: कोई नहीं और दृश्यता: छिपी हुई विशेषताओं ने काम नहीं किया, क्योंकि यह सबमिट बटन को भी छिपाएगा, क्योंकि यह उस रूप में निहित था जिसे मैं छिपाने की कोशिश कर रहा था। सरल उत्तर सीएसएस का उपयोग करके कुछ भी नहीं करने के लिए रूपों की ऊंचाई निर्धारित करना था

इसलिए,

सीएसएस -

    #formID {height:4px;}

मेरे लिए काम किया।

Answer 13

मैंने इस तरह से इस्तेमाल किया, और इसे पसंद किया, यह फ़ॉर्म को मान्य करता है इससे पहले कि सबमिट भी सफारी / Google के साथ संगत हो। नहीं jquery एनएन

        <module-body>
            <form id="testform" method="post">
                <label>Input Title</label>
                <input name="named1" placeholder="Placeholder"  title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>
            </form>
        </module-body>
        <module-footer>
            <input type="button" onclick='if (document.querySelector("#testform").reportValidity()) { document.querySelector("#testform").submit(); }' value="Submit">
            <input type="button" value="Reset">
        </module-footer>