HTML फॉर्म पर डिफ़ॉल्ट सबमिट बटन कैसे निर्धारित किया जाता है?

210

यदि कोई फॉर्म सबमिट किया गया है लेकिन किसी विशिष्ट बटन के द्वारा नहीं, जैसे कि

  • दबाने से Enter
  • HTMLFormElement.submit()जेएस में उपयोग करना

एक ब्राउज़र को यह निर्धारित करने के लिए कैसे निर्धारित किया जाता है कि कौन से कई बटन दबाए गए हैं, यदि कोई है, तो दबाए गए के रूप में उपयोग करने के लिए?

यह दो स्तरों पर महत्वपूर्ण है:

  • onclickसबमिट बटन से जुड़े ईवेंट हैंडलर को कॉल करना
  • डेटा वेब सर्वर को वापस भेज दिया

अब तक के मेरे प्रयोगों से पता चला है कि:

  • दबाने पर Enter, फ़ायरफ़ॉक्स, ओपेरा और सफारी फॉर्म में पहले सबमिट बटन का उपयोग करें
  • दबाने पर Enter, IE या तो पहले सबमिट बटन का उपयोग करता है या उन स्थितियों के आधार पर जो मुझे पता लगाने में सक्षम नहीं है
  • ये सभी ब्राउज़र जेएस सबमिट के लिए बिल्कुल भी उपयोग नहीं करते हैं

मानक क्या कहता है?

यदि यह मदद करेगा, तो यहां मेरा परीक्षण कोड (PHP केवल मेरे परीक्षण की विधि के लिए प्रासंगिक है, मेरे प्रश्न के लिए नहीं)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>

<h1>Get</h1>
<dl>
<?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<h1>Post</h1>
<dl>
<?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
    <input type="text" name="method" />
    <input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
    <input type="text" name="stuff" />
    <input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
    <input type="button" value="submit" onclick="document.theForm.submit();" />
</form>

</body></html>
javascript  html  cross-browser  standards 
— स्टीवर्ट
स्रोत

जवाबों:

115

यदि आप जावास्क्रिप्ट (अर्थात formElement.submit()कुछ भी समतुल्य) के माध्यम से फॉर्म जमा करते हैं , तो सबमिट किए गए किसी भी बटन को सफल नहीं माना जाता है और प्रस्तुत डेटा में उनका कोई भी मान शामिल नहीं है। (ध्यान दें कि यदि आप फॉर्म का उपयोग करके जमा करते हैं तो आपके द्वारा submitElement.click()सबमिट किया गया संदर्भ सक्रिय माना जाता है; यह वास्तव में आपके प्रश्न के प्रेषण के अंतर्गत नहीं आता है क्योंकि यहाँ सबमिट बटन असंदिग्ध है, लेकिन मुझे लगा कि मैं इसे शामिल करूंगा। जो लोग पहले भाग को पढ़ते हैं और आश्चर्य करते हैं कि जेएस फॉर्म सबमिशन के माध्यम से सबमिट बटन को सफल कैसे बनाया जाता है। निश्चित रूप से, फॉर्म के ऑनसुमिट हैंडलर अभी भी इस तरह से आग लगाएंगे, जबकि वे इसके माध्यम से नहीं करेंगे form.submit()ताकि मछली का एक और केतली हो ...)

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

मेरा मानना ​​है कि Internet Explorer स्रोत में पहली बार दिखाई देने वाले सबमिट बटन को चुनता है; मुझे लगता है कि फ़ायरफ़ॉक्स और ओपेरा सबसे कम टैबइंडेक्स के साथ बटन चुनते हैं, पहले परिभाषित करने पर वापस गिरते हैं अगर कुछ और परिभाषित नहीं होता है। कुछ जटिलताओं के बारे में भी है कि क्या सबमेट्स में एक गैर-डिफ़ॉल्ट मान विशेषता IIRC है।

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

— आंद्रेज डॉयल
स्रोत
1
पुन: पैरा 2: मेरा मूल प्रश्न यह था कि क्या "यदि ब्राउज़र बिना किसी सबमिट नियंत्रण को निर्दिष्ट किए किसी फ़ॉर्म को सबमिट करने का कोई साधन प्रदान करता है, तो उसके प्रभाव के संबंध में कुछ भी नहीं है"। लेकिन मैं डेविड के जवाब से इकट्ठा हुआ कि वहाँ नहीं है। IE के बारे में मेरी बात यह थी कि कभी-कभी Enter दबाकर एक फॉर्म सबमिट किया जाता है और कोई सबमिट बटन सेट नहीं होता है। एक परिणाम यह है कि, यदि आपके पास एक ही स्क्रिप्ट को सबमिट करने के कई रूप हैं, तो आप उन्हें अलग करने के लिए सबमिट बटन पर भरोसा नहीं कर सकते। इस परियोजना में मैं काम कर रहा हूँ पर आया था।
— स्टीवर्ट
1
बहुत उपयोगी पहला पैराग्राफ ब्रैकेट सेक्शन - धन्यवाद।
— rbassett
63

HTML 4 इसे स्पष्ट नहीं करता है। वर्तमान HTML5 वर्किंग ड्राफ्ट निर्दिष्ट करता है कि पहला सबमिट बटन डिफ़ॉल्ट होना चाहिए :

किसी formतत्व का डिफ़ॉल्ट बटन ट्री ऑर्डर में पहला सबमिट बटन है जिसका फॉर्म मालिक वह तत्व है।form

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

— क्वेंटिन
स्रोत
ठीक है, तो यह है कि यह क्या करना चाहिए है। क्या में उपयोग कर सकता हूँ?
— पचेरियर
मुझे एचटीएमएल 5 में "निहित प्रस्तुत" देखकर खुशी हुई।
— क्लिंट पचल
61

Andrezj की बहुत बहुत इसे मिल गया ... लेकिन यहाँ एक आसान पार ब्राउज़र समाधान है।

एक फॉर्म इस तरह लें: 

<form>
    <input/>
    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>

    <button type="submit" value="default action"/>
</form>

और इसके लिए रिफ्लेक्टर: 

<form>
    <input/>

    <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/>

    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>
    <button type="submit" value="still another non-default action"/>

    <button type="submit" value="default action"/>
</form>

चूंकि डब्ल्यू 3 सी कल्पना इंगित करती है कि कई सबमिट बटन वैध हैं, लेकिन मार्गदर्शन को छोड़ देता है कि उपयोगकर्ता-एजेंट को उन्हें कैसे संभालना चाहिए, ब्राउज़र निर्माताओं को लागू करने के लिए छोड़ दिया जाता है क्योंकि वे फिट दिखते हैं। मैंने पाया है कि वे फॉर्म में पहला सबमिट बटन सबमिट करेंगे, या फ़ार्म फॉर्म के बाद अगला सबमिट बटन सबमिट करें, जिस पर वर्तमान में फोकस है।

दुर्भाग्य से, केवल प्रदर्शन की शैली जोड़कर : कोई नहीं; काम नहीं करेगा क्योंकि W3C कल्पना किसी भी छिपे हुए तत्व को उपयोगकर्ता के इंटरैक्शन से बाहर रखा जाना चाहिए। इसलिए इसे सादे दृष्टि से छिपाएं!

ऊपर समाधान का एक उदाहरण है जिसे मैंने उत्पादन में डाल दिया। एंटर कुंजी दबाए रखने से डिफ़ॉल्ट फॉर्म सबमिशन अपेक्षा के अनुरूप व्यवहार होता है, तब भी जब अन्य गैर-डिफ़ॉल्ट मान मौजूद होते हैं और डीओएम में डिफ़ॉल्ट सबमिट बटन से पहले होते हैं। जावास्क्रिप्ट हैंडलर से परहेज करते हुए स्पष्ट उपयोगकर्ता इनपुट के साथ माउस / कीबोर्ड इंटरैक्शन के लिए बोनस।

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

— जेम्स
स्रोत
5
धन्यवाद। प्रदर्शन में ठोकर खाई : कोई भी समस्या नहीं है। बटन को छोटा करने के बजाय आप इसे पृष्ठ से बाहर ले जा सकते हैं और इसे एक के साथ जोड़कर <div style="position: fixed; left: -1000px; top: -1000px />। चिंता की एक और बात: सीएसएस के साथ पृष्ठ प्रवाह से बस बटन को छोटा या दूर करना शायद WAI मुद्दों को ला सकता है, क्योंकि स्क्रीन रीडर अभी भी डिफ़ॉल्ट बटन देखेंगे।
— स्टीफन हैबरल
2
इस विस्तृत जवाब के लिए आपको @James धन्यवाद।
— नाथन
1
यह मेरे लिए काम किया, धन्यवाद। मुझे बटन बॉर्डर के लिए इसे जोड़ना था: कोई नहीं; इसे
— यथोचित रूप से
4
आप केवल छिपे हुए बटन की
— टैब
2
<input/>इसके लिए वहां क्या है ?
— एस.जे.
16

मुझे लगता है कि यह पोस्ट किसी को jQuery के साथ करने में मदद करेगी:

http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/

मूल समाधान है:

$(function() {
    $("form input").keypress(function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $('input[type=submit].default').click();
        return false;
    } else {
        return true;
    }
    });
});

और दूसरा मुझे पसंद आया:

jQuery(document).ready(function() {
$("form input, form select").live('keypress', function (e) {
if ($(this).parents('form').find('button[type=submit].default, input[type=submit].default').length <= 0)
return true;

if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parents('form').find('button[type=submit].default, input[type=submit].default').click();
return false;
} else {
return true;
}
});
});
— रोड्रिगो कैबलेरो
स्रोत
jQuery.Event में हमेशा इसकी .wichविशेषता होती है। इसके अलावा DOM .keyCode(या .charCodeउस मामले के लिए) पर वापस जाने की कोई आवश्यकता नहीं है ।
— अर्जन
यहाँ jQuery के बारे में एक और मुद्दा है अस्वाभाविक डबल क्वेरी। चूँकि, वास्तविक रूप से लौटने की कोई आवश्यकता नहीं है, इसके अलावा, पहले से अर्जन द्वारा सलाह दी गई कटौती को एकीकृत करने पर jQuery संस्करण वास्तव में स्पष्ट और छोटा हो जाता है।
— सोलेटन
मैंने कीपर की बजाय कीडाउन का उपयोग किया (कीप की प्रतीक्षा से बचें) और मैंने e.preventDefault();"वास्तविक" डिफ़ॉल्ट बटन के निष्पादन से बचने के लिए इस फ़ंक्शन की शुरुआत में जोड़ा । वास्तव में अच्छी तरह से काम करता है।
— मैट रॉय
6

मेरे पास उस पर 11 सबमिट बटन के साथ एक फॉर्म था, और जब उपयोगकर्ता प्रवेश करता था तो वह हमेशा पहले सबमिट बटन का उपयोग करता था। मैंने कहीं और पढ़ा है कि किसी फॉर्म पर एक से अधिक सबमिट बटन होना एक अच्छा विचार (बुरा अभ्यास) नहीं है, और ऐसा करने का सबसे अच्छा तरीका वह बटन है जिसे आप डिफ़ॉल्ट चाहते हैं, क्योंकि फॉर्म पर एकमात्र सबमिट बटन है। अन्य बटनों को "TYPE = BUTTON" में बनाया जाना चाहिए और एक ऑनक्लिक घटना को जोड़ा गया जो जावास्क्रिप्ट में आपकी खुद की सबमिट रूटीन कहे। कुछ इस तरह :-

<SCRIPT Language="JavaScript">
function validform()
{
  // do whatever you need to validate the form, and return true or false accordingly
}

function mjsubmit()
{
  if (validform()) { document.form1.submit(); return true;}
  return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">

यहां, बटन 3 डिफ़ॉल्ट है, और यद्यपि आप प्रोग्राम को अन्य बटन के साथ फ़ॉर्म सबमिट कर रहे हैं, mjsubmit रूटीन उन्हें मान्य करता है। HTH।

— ग्राफिक
स्रोत
19
बुरा विचार। आपका फॉर्म जेएस अक्षम के साथ काम नहीं करेगा। जेएस को विनीत रूप से इस्तेमाल किया जाना चाहिए।
— बालुसक
7
बहुत कम ब्राउज़रों ने जेएस को डिफ़ॉल्ट रूप से बंद कर दिया है, यहां तक ​​कि आईपॉड पर भी! मैं जिस फॉर्म का हवाला दे रहा था, जेएस ने उसे बेकार कर दिया! जेएस चलाने पर इतना टिका है।
— ग्राफिक
7
डिफ़ॉल्ट रूप से बंद कर दिया गया है या नहीं, जिनके पास जेएस अक्षम हैं, उन्हें इस तरह के एक मूर्खतापूर्ण छोटे रोड़ा के चारों ओर पाने के लिए इसे बस पर स्विच करने की आवश्यकता नहीं है।
— स्टीवर्ट
2
किस तरह के फॉर्म में 11 सबमिट बटन हैं ?? ( जिज्ञासा )
— बेन २ '
2
मैं विनीत जावास्क्रिप्ट को मान्य करने का सबसे बड़ा कारण यह देखता हूं कि अप्रभावी जावास्क्रिप्ट पूरी तरह से बंद हो जाती है। मुझे यकीन नहीं है कि मैं जो सोच रहा हूं उसे कैसे योग्य करूं, लेकिन जब मुझे जेएस पर बिल्कुल निर्भरता वाले पृष्ठ दिखाई देते हैं, तो मैं यह भी शर्त लगाता हूं कि मैं अपने डोम के साथ कुछ मुश्किल चीजें कर सकता हूं और सर्वर पर कुछ अनपेक्षित कर सकता हूं।
— सामन्था ब्रांहम
6

इसका उपयोग करके अब इसे हल किया जा सकता है flexbox:

एचटीएमएल

<form>
    <h1>My Form</h1>
    <label for="text">Input:</label>
    <input type="text" name="text" id="text"/>

    <!-- Put the elements in reverse order -->
    <div class="form-actions">
        <button>Ok</button> <!-- our default action is first -->
        <button>Cancel</button>
    </div>
</form>

सीएसएस

.form-actions {
    display: flex;
    flex-direction: row-reverse; /* reverse the elements inside */
}

स्पष्टीकरण
फ्लेक्स बॉक्स का उपयोग करके, हम एक कंटेनर में तत्वों के क्रम को उल्टा कर सकते हैं display: flexजो सीएसएस नियम का उपयोग करके भी उपयोग करता है flex-direction: row-reverse:। इसके लिए सीएसएस या छिपे हुए तत्वों की आवश्यकता नहीं है। पुराने ब्राउज़रों के लिए जो फ्लेक्सबॉक्स का समर्थन नहीं करते हैं, वे अभी भी एक व्यावहारिक समाधान प्राप्त करते हैं, लेकिन तत्वों को उलट नहीं किया जाएगा।

डेमो
http://codepen.io/Godwin/pen/rLVKjm

— गॉडविन
स्रोत
2

मैं उसी प्रश्न से जूझ रहा था जब से मैंने बीच में बटन जमा किया था, जिसमें से दूसरे पृष्ठ पर पुनर्निर्देशित किया गया था, जैसे:

<button type="submit" onclick="this.form.action = '#another_page'">More</button>

जब उपयोगकर्ता ने Enter कुंजी दबाया, तो यह बटन किसी अन्य सबमिट बटन के बजाय क्लिक किया गया था।

इसलिए मैंने कई सबमिट बटन और अलग-अलग दृश्यता विकल्पों के साथ एक से बनाकर कुछ आदिम परीक्षण किए और जो बटन क्लिक किया गया था, उस पर क्लिक करके अलर्ट क्लिक करें: https://jsfiddle.net/aqfy51om/1/

ब्राउज़रों और OS'es मैं परीक्षण के लिए इस्तेमाल किया:

खिड़कियाँ

  • Google Chrome 43 (c'mon google: D)
  • मोज़िला फ़ायरफ़ॉक्स 38
  • इंटरनेट एक्सप्लोरर 11
  • ओपेरा 30.0

OSX

  • Google Chrome 43
  • सफारी 7.1.6

इनमें से अधिकांश ब्राउज़रों ने दृश्यमान विकल्पों के लागू होने के बावजूद बहुत पहले बटन पर क्लिक किया IE और सफारी जो तीसरे बटन पर क्लिक करते हैं, जो "छिपा हुआ" कंटेनर में "दृश्यमान" है:

<div style="width: 0; height: 0; overflow: hidden;">
    <button type="submit" class="btn btn-default" onclick="alert('Hidden submit button #3 was clicked');">Hidden submit button #3</button>
</div>

तो मेरा सुझाव है, जो मैं खुद का उपयोग करने जा रहा हूं:

यदि आपके पास विभिन्न अर्थों के साथ कई सबमिट बटन हैं, तो फॉर्म की शुरुआत में डिफ़ॉल्ट कार्रवाई के साथ सबमिट बटन शामिल करें जो या तो है:

  1. पूरी तरह से दिखाई दे रहा है
  2. के साथ एक कंटेनर में लिपटे style="width: 0; height: 0; overflow: hidden;"

संपादित करें एक और विकल्प बटन को ऑफसेट करना (अभी भी शुरुआत से) हो सकता है style="position: absolute; left: -9999px; top: -9999px;", बस इसे IE में कोशिश की - काम किया है, लेकिन मुझे नहीं पता कि यह और क्या पेंच कर सकता है, उदाहरण के लिए मुद्रण ।।

— क्रिस्टियन
स्रोत
1

अपनी टिप्पणियों से:

एक परिणाम यह है कि, यदि आपके पास एक ही स्क्रिप्ट को सबमिट करने के कई रूप हैं, तो आप उन्हें अलग करने के लिए सबमिट बटन पर भरोसा नहीं कर सकते।

मैं <input type="hidden" value="form_name" />प्रत्येक फॉर्म में एक ड्रॉप करता हूं ।

यदि जावास्क्रिप्ट के साथ सबमिट करना: प्रपत्रों में सबमिट ईवेंट जोड़ें, घटनाओं को उनके बटनों पर क्लिक न करें। Saavy उपयोगकर्ता अपने माउस को बहुत बार नहीं छूते हैं।

— रयान फ्लोरेंस
स्रोत
वास्तव में, लेकिन यह इस सवाल का जवाब देता है: stackoverflow.com/questions/541869/…
— स्टीवर्ट
1

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

$('form input').keypress(function(e){

    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)){ $(e.target).closest('form').submit(); return false; }
    else return true;

});
— axiom82
स्रोत
सरल और इस मुद्दे को हल करता है
— toddmo
1

अजीब बात है कि पहला बटन दर्ज करें हमेशा परवाह किए बिना पहले बटन पर जाता है या नहीं, जैसे कि jquery का उपयोग करना show/hide()। विशेषता जोड़ना .attr('disabled', 'disabled')पूरी तरह से दर्ज करें बटन प्राप्त करने को रोकने रिकॉर्ड डायलॉग में इन्सर्ट / एडिट + डिलीट बटन विजिबिलिटी को एडजस्ट करते समय उदाहरण के लिए यह समस्या है । मुझे इन्सर्ट के सामने कम हैकिश और सिंपल प्लेसिंग एडिट मिले

<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="insert">Insert</button>
<button type="submit" name="action" value="delete">Delete</button>

और जावास्क्रिप्ट कोड का उपयोग करें:

$("#formId button[type='submit'][name='action'][value!='insert']").hide().attr('disabled', 'disabled');
$("#formId button[type='submit'][name='action'][value='insert']").show().removeAttr('disabled');
— TMA
स्रोत
0

मेरी रेसिपी:

<form>
<input type=hidden name=action value=login><!-- the magic! -->

<input type=text name=email>
<input type=text name=password>

<input type=submit name=action value=login>
<input type=submit name=action value="forgot password">
</form>

यदि कोई भी बटन 'क्लिक' नहीं किया जाता है तो यह डिफॉल्ट हिडन फील्ड को भेज देगा।

यदि उन्हें क्लिक किया जाता है, तो उनके पास वरीयता होती है और यह मान दिया जाता है।

— GCB
स्रोत
2
लेकिन क्या यह व्यवहार मानक द्वारा निर्दिष्ट है? और क्या इसे सही ढंग से लागू करने के लिए ब्राउज़रों पर भरोसा किया जा सकता है?
— स्टीवर्ट
अच्छा प्रश्न। मैंने इसे सभी ए ब्राउज़रों (यूआई ब्राउज़र मैट्रिक्स से) पर काम करने के लिए परीक्षण किया है और यह वास्तविक जीवन में मुझे सबसे अधिक अनुकूलता मिल सकती है (मानक चाहे जो भी हो)
— gcb
@yellowandred क्या होता है? बाद में देख लेंगे
— gcb
1
मेरी गलती से, मैंने {type = "छिपा हुआ"} बदल दिया और मैंने समान 'नाम' मानों को नोटिस नहीं किया।
— येलो और रेड
यह मेरे लिए IE11 या Fx30 में काम नहीं करता है। मान हमेशा छिपे हुए मान पर सेट होता है।
— जेमी किट्सन
0

एक और समाधान जो मैंने उपयोग किया है वह है फॉर्म में सिर्फ एक बटन, और दूसरे बटन नकली।

यहाँ एक उदाहरण है:

<form>
  <label for="amount">Amount of items</label>
  <input id="amount" type="text" name="amount" />
  <span id="checkStock" class="buttonish">Check stock</span>
  <button type="submit" name="action" value="order">Place order</button>
</form>

मैं तो बटन की तरह दिखने के लिए स्पैन तत्वों को स्टाइल करता हूं। एक जेएस श्रोता स्पैन को देखता है और एक बार क्लिक करने पर वांछित ऑपरेशन करता है।

जरूरी नहीं कि सभी स्थितियों के लिए सही हो, लेकिन कम से कम यह करना बहुत आसान है।

— जोहान फ्रेड्रिक वर्न
स्रोत
1
जिन उपयोगकर्ताओं ने JS को अक्षम कर दिया है, उनके लिए क्या कमियां हैं?
— स्टीवर्ट
JS विकलांग उपयोगकर्ता इंटरनेट का उपयोग नहीं कर पाएंगे, यह आजकल की तरह सरल है।
— क्रिस्टोफर बुबच
0

से एचटीएमएल 4 कल्पना :

यदि किसी फ़ॉर्म में एक से अधिक सबमिट बटन हैं, तो केवल सक्रिय सबमिट बटन सफल है।

इसका मतलब है कि 1 से अधिक सबमिट बटन दिया गया है और कोई भी सक्रिय (क्लिक किया हुआ) नहीं है, कोई भी सफल नहीं होना चाहिए।

और मेरा तर्क है कि यह समझ में आता है: कई सबमिट बटन के साथ एक विशाल रूप की कल्पना करें। सबसे ऊपर, "इस रिकॉर्ड को हटाएं" -बटन है, फिर बहुत सारे इनपुट का पालन करते हैं और नीचे एक "इस रिकॉर्ड को अपडेट करें" -बटन है। प्रपत्र के निचले भाग में स्थित फ़ील्ड में प्रवेश करते समय एक उपयोगकर्ता को कभी भी संदेह नहीं होगा कि वह ऊपर से "इस रिकॉर्ड को हटाएं" का तात्पर्य है।

इसलिए मुझे लगता है कि यह पहला या किसी अन्य बटन का उपयोग करने के लिए एक अच्छा विचार नहीं है जिसे उपयोगकर्ता परिभाषित नहीं करता है (क्लिक करें)। फिर भी, ब्राउज़र निश्चित रूप से कर रहे हैं।

— क्रिस्टोफर के।
स्रोत
-2

संपादित करें: क्षमा करें, यह उत्तर लिखते समय मैं सामान्य अर्थों में सबमिट बटन के बारे में सोच रहा था। नीचे दिया गया उत्तर कई type="submit"बटनों के बारे में नहीं है , क्योंकि यह केवल एक को छोड़ता है type="submit"और दूसरे को बदलता है type="button"। मैं उत्तर को यहां छोड़ता हूं क्योंकि मामले में संदर्भ से किसी को मदद मिलती है जो typeउनके रूप को बदल सकता है:

दर्ज करते समय कौन सा बटन दबाया जाता है यह निर्धारित करने के लिए, आप इसे ऊपर से चिह्नित कर सकते हैं type="submit", और अन्य बटन उन्हें चिह्नित करते हैं type="button"। उदाहरण के लिए:

<input type="button" value="Cancel" />
<input type="submit" value="Submit" />
— जेसुएस करेरा
स्रोत
"बटन" टाइप करने से फ़ॉर्म सबमिट नहीं होता है। इसका उपयोग केवल क्लाइंट-साइड स्क्रिप्ट को ट्रिगर करने के लिए किया जाता है।
— स्टीवर्ट
वास्तव में, यही कारण है कि जब आप प्रवेश करते हैं तो ब्राउज़र इसे छोड़ देता है, और टाइप "सबमिट" के साथ निष्पादित हो जाता है। उदाहरण के लिए क्लिक पर कुछ भी करने के लिए आप "बटन" टाइप का उपयोग कर सकते हैं। कृपया नकारात्मक वोट हटा दें।
— जेसुज कैरेरा
सवाल कई सबमिट बटन के बारे में था ।
— स्टीवर्ट
मेरा उदाहरण कई सबमिट बटन के लिए पूरी तरह से मान्य है। टाइप "सबमिट" वाला एक ब्राउज़र द्वारा निर्धारित कार्य के रूप में निर्धारित किया जाता है (जो कि सवाल था कि क्या था)। फिर दूसरे बटन के साथ आप इसे अपने उदाहरण में आपके द्वारा दी गई ऑनक्लिक घटना की तरह जावास्क्रिप्ट घटनाओं का उपयोग करके सबमिट बटन के रूप में उपयोग कर सकते हैं। तो मेरा जवाब प्रासंगिक है और एक डाउन वोट के लायक नहीं है। कृपया इसे हटा दें।
— जेसुज कैरेरा
1
यदि आपका बिंदु केवल उनमें से एक "सबमिट" टाइप करके अस्पष्टता को दूर करने और अन्य बटन को लागू करने के लिए जावास्क्रिप्ट का उपयोग करने का सुझाव देना था, तो यह ग्राफिक के उत्तर का एक डुप्लिकेट है और जैसे कि पहले से ही एक बुरे विचार के रूप में खारिज कर दिया गया है।
— स्टीवर्ट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.