HTML बटन फॉर्म जमा नहीं करने के लिए


370

मेरा एक रूप है। उस फॉर्म के बाहर, मेरे पास एक बटन है। एक साधारण बटन, इस तरह:

<button>My Button</button>

फिर भी, जब मैं इसे क्लिक करता हूं, तो यह फ़ॉर्म सबमिट कर देता है। यहाँ कोड है:

<form id="myform">
    <input />
</form>
<button>My Button</button>

यह सब बटन कुछ जावास्क्रिप्ट होना चाहिए। लेकिन यहां तक ​​कि जब यह ऊपर के कोड में जैसा दिखता है, तब भी यह फ़ॉर्म को सबमिट करता है। जब मैं टैग बटन को स्पैन में बदलता हूं, तो यह पूरी तरह से काम करता है। लेकिन दुर्भाग्य से, यह एक बटन होने की जरूरत है। क्या फॉर्म सबमिट करने से उस बटन को ब्लॉक करने का कोई तरीका है? जैसे

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

3
यह मुद्दा आधुनिक ब्राउज़रों में प्रतिलिपि प्रस्तुत करने योग्य नहीं है, और समस्या मूल रूप से गलतफहमी के कारण हो सकती है। जबकि डिफ़ॉल्ट के लिए buttonहै type=submit, buttonतत्व के किसी भी रूप से बाहर होने पर सबमिट करने का कोई फॉर्म नहीं है। जब तक एक वास्तविक प्रदर्शन (एक नमूना दस्तावेज़, एक ब्राउज़र की पहचान, और टिप्पणियों का वर्णन जो यह दर्शाता है कि कुछ फ़ॉर्म सबमिट किया गया है) दिया जा सकता है, इस प्रश्न को गैर-प्रतिलिपि प्रस्तुत करने योग्य के रूप में बंद किया जाना चाहिए। उपयोग करना type=buttonअच्छा अभ्यास है, लेकिन यह समस्या को वास्तविक नहीं बनाता है।
जुक्का के। कोर्पेला

जवाबों:


894

मुझे लगता है कि यह HTML की सबसे कष्टप्रद छोटी ख़ासियत है ... सबमिट न करने के लिए उस बटन को "बटन" टाइप होना चाहिए।

<button type="button">My Button</button>

अद्यतन 5 फरवरी -2019: के अनुसार एचटीएमएल लिविंग स्टैंडर्ड (और यह भी एचटीएमएल 5 विनिर्देश ):

लापता मान डिफ़ॉल्ट और अमान्य मान डिफ़ॉल्ट बटन राज्य जमा कर रहे हैं।


9
@ कोई कारण नहीं बतायाto use <button>
संदीप पिंगल

4
@SandipPingle इसका उपयोग करने का कोई कारण नहीं है, जब तक कि आपको वास्तव में कुछ जटिल प्रकार की स्टाइलिंग की आवश्यकता न हो। इसके अलावा, IE6 और IE7 (सौभाग्य से चरणबद्ध हो रहे हैं) <button>कुछ मामलों में गलत तरीके से संभालते हैं। इसके अतिरिक्त, <button>100% क्रॉस-ब्राउज़र-संगत नहीं है कि विभिन्न ब्राउज़र एक ही <button>रूप में उपयोग किए जाने पर अलग-अलग मान सबमिट कर सकते हैं ।
पॉवर्सलेव

35
यह एक महान जवाब है, लेकिन यह कोई ख़ासियत नहीं है । typeकिसी <button>टैग में विशेषता का डिफ़ॉल्ट मान है submit। जब परिवर्तित किया जाता है type=button, तो <button>कोई डिफ़ॉल्ट व्यवहार नहीं दिया जाता है। typeयहां देखें विशेषता: developer.mozilla.org/en-US/docs/Web/HTML/Element/button
माइकल बेंजामिन

1
तो क्या <button type='submit'>मेरे लिए भी मुश्किल है का विचार है हा। वैसे भी आपका जवाब बहुत अच्छा काम करता है!
divHelper11 15

2
गैर-प्रपत्र-विशिष्ट तत्व का डिफ़ॉल्ट (और इस प्रकार निहित) व्यवहार संभावित रूप से विनाशकारी प्रपत्र-विशिष्ट कार्यक्षमता को ट्रिगर करना है। एचटीएमएल कल्पना करने के लिए एक अजीब डिजाइन निर्णय कैसे नहीं है ?
२०

36

return false;ऑनक्लिक हैंडलर के अंत में काम करेगा। हालाँकि, इसे केवल जोड़ने के type="button"लिए बेहतर है <button>- इस तरह यह किसी भी जावास्क्रिप्ट के बिना भी ठीक से व्यवहार करता है।


1
बटन जो फॉर्म जमा नहीं करते हैं, वे वैसे भी केवल जावास्क्रिप्ट सक्षम के साथ उपयोगी होते हैं ... मैं मानता हूं कि टाइप = "बटन" हालांकि क्लीनर है।
ThiefMaster

2
return false;सभी परिदृश्यों में काम नहीं करता है, जबकि type="Button"करता है। सक्षम जावास्क्रिप्ट के साथ भी।
brejoc

15

डेव मार्कल सही है। से W3School की वेबसाइट :

बटन के लिए हमेशा टाइप विशेषता निर्दिष्ट करें। इंटरनेट एक्सप्लोरर के लिए डिफ़ॉल्ट प्रकार "बटन" है, जबकि अन्य ब्राउज़रों में (और डब्ल्यू 3 सी विनिर्देश में) यह "सबमिट" है।

दूसरे शब्दों में, जिस ब्राउज़र का आप उपयोग कर रहे हैं वह W3C के विनिर्देशन का अनुसरण कर रहा है।


15

डिफ़ॉल्ट रूप से, HTML बटन एक फ़ॉर्म सबमिट करते हैं।

यह इस तथ्य के कारण है कि फॉर्म के बाहर स्थित बटन भी सबमिटर के रूप में कार्य करते हैं (W3Schools वेबसाइट देखें: http://www.w3schools.com/tags/att_button_form.asp )

दूसरे शब्दों में, बटन प्रकार डिफ़ॉल्ट रूप से "सबमिट" है

<button type="submit">Button Text</button>

इसलिए इसके आसपास आने का एक आसान तरीका बटन प्रकार का उपयोग करना है ।

<button type="button">Button Text</button>

अन्य विकल्पों में ऑन्कलिक या किसी अन्य हैंडलर के अंत में गलत तरीके से वापस लौटना शामिल है , जब बटन पर क्लिक किया जाता है, या इसके बजाय <इनपुट> टैग का उपयोग किया जाता है

अधिक जानकारी के लिए, मोज़िला डेवलपर नेटवर्क की जानकारी बटन पर देखें : https://developer.mozilla.org/en/docs/Web/HTML/Element/button


3

यह <Button>टैग का उपयोग नहीं करने के लिए अनुशंसित है । <Input type='Button' onclick='return false;'>इसके बजाय टैग का उपयोग करें । ("झूठे झूठे" का उपयोग करके वास्तव में फॉर्म नहीं भेजना चाहिए।)

कुछ संदर्भ सामग्री


2
यह उपयोग करने के लिए पर्याप्त है <input type="button" />, और यह करने के लिए पर्याप्त है return false;- दोनों करने की कोई आवश्यकता नहीं है।
टॉम

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

आपके द्वारा लिंक की गई संदर्भ सामग्री के नोट के अनुसार: "जबकि टाइप इनपुट के तत्व अभी भी पूरी तरह से वैध HTML हैं, नया <बटन> तत्व अब बटन बनाने का पसंदीदा तरीका है।" तो यह बिल्कुल विपरीत है जो आपने कहा था।
jedzej

1

एक्सेसिबिलिटी कारण के लिए, मैं इसे कई type=submitबटन के साथ नहीं खींच सकता । मूल रूप से formकई बटन के साथ मूल रूप से काम करने का एकमात्र तरीका है, लेकिन केवल एक ही फॉर्म सबमिट कर सकता है जब Enterकुंजी को मारना यह सुनिश्चित करना है कि उनमें से केवल एक ही है, type=submitजबकि अन्य अन्य प्रकार में हैं type=button। इस तरह, आप कीबोर्ड समर्थन के मामले में किसी ब्राउज़र पर फ़ॉर्म से निपटने में बेहतर उपयोगकर्ता अनुभव का लाभ उठा सकते हैं।


0

एक अन्य विकल्प जो मेरे लिए काम करता है वह था ऑन्सुबमिट = "असत्य लौटना;" फार्म टैग के लिए।

<form onsubmit="return false;">

शब्द के प्रकार को बदलने के उपरोक्त तरीकों के रूप में शब्दार्थ शायद उतना अच्छा समाधान नहीं है, लेकिन यदि आप केवल एक फार्म तत्व जमा नहीं करना चाहते हैं तो यह एक विकल्प प्रतीत होता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.