2010-01-20 18 views
19

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

अनुभवी उपयोगकर्ता दिए गए बटन पर क्लिक करने के बजाय "एंटर" या "रिटर्न" दबाकर अपने फॉर्म जमा करना पसंद करते हैं।

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

मैं जावास्क्रिप्ट श्रोताओं को लिंक नहीं करता, जो कुंजी दबाए गए या ऐसा कुछ ढूंढ रहे हैं। इसलिए मैं इस समस्या के लिए एक बेहतर दृष्टिकोण की तलाश में हूं। हालांकि, जावास्क्रिप्ट या jquery समाधान (keypressed-listerner के बिना) स्वागत है।

आपकी सहायता के लिए अग्रिम में बहुत बहुत धन्यवाद।

+2

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

उत्तर

8

आप कर सकते थे, सैद्धांतिक रूप से कम से कम, अपने रूप में तीन submit बटन होते हैं।

बटन दो मौजूदा 'कम महत्वपूर्ण' बटन (फॉर्म के आधे रास्ते से) है, बटन तीन आपके मौजूदा रूप से मौजूदा 'वास्तविक-सबमिट' बटन है।

बटन को छुपाया जाना चाहिए (सीएसएस display:none याका उपयोग करके) और अपने वर्तमान 'वास्तविक-सबमिट' के समान कार्य करना चाहिए। मुझे लगता है कि यह अभी भी ब्राउज़र द्वारा पाया जाने वाला पहला बटन होगा, इसकी दृश्यता के बावजूद।

<form method="post" method="whatever.php" enctype="form/multipart"> 

<fieldset id="first"> 

<label>...<input /> 
<label>...<input /> 
<label>...<input /> 

<input type="submit" value="submit" style="visibility: hidden;" <!-- or "display: none" --> /> 
<input class="less_important" type="submit" value="submit" /> 

</fieldset> 

<fieldset id="second"> 

<label>...<input /> 
<label>...<input /> 
<label>...<input /> 

<input type="submit" value="submit" class="actual_submit" /> 

</fieldset> 

</form> 

टिप्पणियों के जवाब में संपादित:

मैंने सोचा छिपा बटन भी डिफ़ॉल्ट रूप से अक्षम कर रहे थे? [Md5sum]

एक वैध बिंदु है, लेकिन मैं पोस्टिंग है, जिसमें तकनीक काम किया दोनों के लिए, इससे पहले कि केवल फ़ायरफ़ॉक्स (3.5.7, Ubuntu 9.10) में परीक्षण की गलती की। पूर्ण xhtml फ़ाइल चिपका दी गई है (नीचे) जो इन टिप्पणियों के बाद मेरे परीक्षण का आधार बनाती है।

<?xml version="1.0" encoding="utf-8"?> 
<!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> 
    <title>3button form</title> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> 
     <script type="text/javascript" src="js/jquery.js"></script> 


     <script type="text/javascript"> 

$(document).ready(

    function() { 

     $('input[type="submit"]').click(
      function(e){ 
       alert("button " + $(this).attr("name")); 
      } 
     ); 

    } 
); 
     </script> 


</head> 

<body> 

<form method="post" method="whatever.php" enctype="form/multipart"> 

<fieldset id="first"> 

<label>...<input /> 
<label>...<input /> 
<label>...<input /> 

<input name="one" type="submit" value="submit" style="display:none;" /><!-- or "display: none" --> 
<input name="two" class="less_important" type="submit" value="submit" /> 

</fieldset> 

<fieldset id="second"> 

<label>...<input /> 
<label>...<input /> 
<label>...<input /> 

<input name="three" type="submit" value="submit" class="actual_submit" /> 

</fieldset> 

</form> 


</body> 

</html> 

display: none (डिफ़ॉल्ट बटन सत्ता के लिए पात्र परिणाम सेट में शामिल है, और) फार्म के एक सक्रिय हिस्सा होने से एक बटन को रोकने चाहिए; visibility: hidden नहीं होना चाहिए। हालांकि इन दोनों मामलों में कुछ ब्राउज़रों द्वारा गलत हो गया है। अदृश्य पहले सबमिट बटन का सामान्य तरीका position: absolute; है और इसे पृष्ठ से बाहर ले जाएं (उदाहरण के लिए बाएं: -4000 पीएक्स)। यह बदसूरत लेकिन भरोसेमंद है। अपने टैबिंडेक्स को बदलने का भी एक अच्छा विचार है, इसलिए यह अपेक्षित फॉर्म टैबबिंग ऑर्डर में हस्तक्षेप नहीं करता है।

कम से कम दो बिंदुओं को मुझे इस टिप्पणी में उठाना है। क्रम में:

  1. "सामान्य तरीका ..." मुझे अनजान था कि एक सामान्य तरीका था, और इस लक्ष्य को एक लक्ष्य प्राप्त करने की संभावना के रूप में प्रस्तुत किया, पूर्ण ज्ञान में कि लगभग निश्चित रूप से थे किसी भी बेहतर तरीके से, विशेष रूप से दिया गया है कि मुझे एक ही रूप में एकाधिक सबमिट बटन के लिए एक अच्छा कारण नहीं दिख रहा है।
  2. उपर्युक्त बिंदु की बाद की सजा को देखते हुए, मैं यह स्पष्ट करना चाहता हूं कि मैं ऐसा करने का समर्थन नहीं करता हूं। बिलकुल। यह एक बदसूरत, और गैर-अर्थपूर्ण, लगता है कि एक से अधिक सबमिट बटन है, ओपी के उदाहरण के साथ - एक बटन स्पष्ट रूप से सबमिट बटन नहीं होने पर
  3. `स्थिति की धारणा: पूर्ण; बाएं: -4000 पीएक्स; 'मेरे साथ हुआ था, लेकिन यह' दृश्यता: छुपा; 'जैसा ही प्रभावशाली प्रतीत होता था, और मेरे पास किसी भी कारण से' स्थिति: पूर्ण; 'का सहज नापसंद है ... इसलिए मैं साथ गया वह विकल्प जो लिखने के समय मेरे लिए कम आपत्तिजनक था ... =)

मैं टैबिन्डेक्स के बारे में आपकी टिप्पणी की सराहना करता हूं, हालांकि, ऐसा कुछ था जिसे मैंने कभी भी सोचा नहीं था।

मुझे खेद है कि अगर मैं कुछ हद तक झपकी लग रहा हूं, तो देर हो चुकी है, मैं थक गया हूं ... yadda-yadda; मैं अपने रिटर्न होम के बाद से विभिन्न ब्राउज़रों में परीक्षण कर रहा हूं और ऐसा लगता है कि फ़ायरफ़ॉक्स 3.5+ एक ही व्यवहार देता है- विंडोज एक्सपी और उबंटू 9 .10 दोनों पर 'बटन वन' रिपोर्ट करना, सभी वेबकिट ब्राउज़र (मिडोरी, एपिफेनी, सफारी और क्रोम) असफल और 'बटन दो' रिपोर्ट करें।

तो यह निश्चित रूप से display: none; सबमिट बटन पर एक असफल योग्य विचार है। जबकि visibility:hidden कम से कम काम करता है।


  1. जो से मेरा मतलब है कि मार 'दर्ज' शुरू हो रहा फार्म प्रस्तुत घटना, या रूप का पहला सबमिट बटन, की क्लिक करें घटना है कि क्या है कि पहले प्रस्तुत की परवाह किए बिना `था प्रदर्शन: कोई नहीं ; `या` दृश्यता: छुपा '।

    कृपया ध्यान रखें कि मेरे jQuery कौशल सीमित हैं, इसलिए परीक्षण किए गए परीक्षण (मैं निष्पादन में होने वाले संघर्षों को रोकने और रोकने के लिए केवल एक समय में भाग गया था, उस समय टिप्पणी करता हूं कि मैंने उस समय नहीं चला था, दोनों प्रस्तुत किए गए हैं - एक, स्पष्ट रूप से, टिप्पणी की गई) अपर्याप्त और गैर-प्रतिनिधि हो सकता है।

    <input type="submit" value="" onclick="return false;" style="opacity: 0"> 
    

    बटन अभी भी पर प्रदान किया जाएगा:

+0

मैंने सोचा कि छुपा बटन डिफ़ॉल्ट रूप से अक्षम भी थे? –

+2

'डिस्प्ले: किसी भी बटन को फ़ॉर्म के सक्रिय भाग होने से नहीं रोकना चाहिए (परिणाम सेट में शामिल है, और डिफ़ॉल्ट-बटन-नेस के लिए योग्य); 'दृश्यता: छुपा 'नहीं होना चाहिए। हालांकि इन दोनों मामलों में कुछ ब्राउज़रों द्वारा गलत हो गया है। अदृश्य पहले सबमिट बटन का सामान्य तरीका 'स्थिति: पूर्ण;' है और इसे पृष्ठ से बाहर ले जाएं (उदाहरण के लिए 'बाएं: -4000px' के साथ)। यह बदसूरत लेकिन भरोसेमंद है। अपने 'टैबिंडेक्स' को बदलने का भी एक अच्छा विचार है, इसलिए यह अपेक्षित फॉर्म टैबबिंग ऑर्डर में हस्तक्षेप नहीं करता है। – bobince

+0

-above- टिप्पणियों को संबोधित करने के लिए संपादित किया गया। –

19

अपना पहला बटन <input type="button" /> पर बदलें।

+2

यद्यपि चीजों को ठीक से करने के लिए! +1 –

+1

2 सबमिट बटन कैसे अनुचित है? हो सकता है कि वह दोनों बटन जावास्क्रिप्ट का उपयोग किये बिना काम करना चाहें। – Wes

+2

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

-1

क्या यह आपके कम महत्वपूर्ण सबमिट बटन पर पूर्ण स्थिति का उपयोग करने का विकल्प है और क्या यह HTML में आपके प्राथमिक सबमिट बटन के बाद दिखाई देता है? तो, आप कर सकते हैं:

<form> 
<p> 
Stuff 
<input type="submit" value="This is my main submit button" /> 
<input type="submit" value="This is my secondary submit button" style="position: absolute; left: 0px; top: 0px; /> 
</p> 
</form> 

आपका माध्यमिक सबमिट बटन स्क्रीन पर पहले दिखाई देगा, लेकिन प्राथमिक सबमिट बटन पर पूर्वता लेना चाहिए जब दर्ज दबाया जाता है।

+0

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

+1

आम तौर पर, मैं सहमत हूं, लेकिन जब डिज़ाइन के भीतर कोई समाधान मौजूद होता है, तो मैं इसे अपने उत्तर के रूप में प्रस्तुत करना चाहता हूं। – Wes

+0

सहमत हैं, और मैं अक्सर भी करता हूं, इसलिए कारण मैं बिना किसी डाउनवोट के बयान देता हूं, क्योंकि यह समस्या का एक बिल्कुल व्यवहार्य समाधान है। यह सिर्फ एक विधि नहीं है जिसका मैं उपयोग करूंगा। –

3

पहला बटन क्या करता है? तुम सिर्फ एक js श्रोता संलग्न करने के लिए है, जो प्रस्तुत नहीं करता है के लिए एक बटन की जरूरत है, का उपयोग

<button type="button" id="myButton">Text Here</button> 
-1
<script> 
$(function(){ 
    $('#button-new-captcha').click(function(){ 
     $('input[name=button-submit]').prop('name', 'button-new-captcha').click(); 
    }); 
}); 
</script> 

<div class="buttons"> 
    <a class="btn btn-cancel" href="/login">Cancel</a> 
    <a class="btn btn-default" href="#" id="button-new-captcha">New Image</a> 
    <input type="submit" name="button-submit" class="btn btn-default" value="Send Username">  
</div> 
+1

स्पष्टीकरण ...? – lpapp

0

एक और वैकल्पिक हल के लिए एक अतिरिक्त गैर कार्यात्मक रूप के बहुत शुरुआत में इनपुट सबमिट करें और अस्पष्टता का उपयोग कर इसे छिपाने बनाने के लिए है पृष्ठ, पारदर्शी यद्यपि, इसलिए आपको इसके लिए कुछ अचल संपत्ति प्रदान करनी होगी। वैकल्पिक रूप से आप इसे जेड-इंडेक्स का उपयोग करके किसी अन्य तत्व के पीछे धक्का देने या पेज के बाहर इसे प्रस्तुत करने के साथ खेल सकते हैं क्योंकि अन्य ने पहले यहां सुझाव दिया है।

onclick="return false;" के साथ आपको क्या लाभ होता है यह है कि फॉर्म "एंटर" मारते समय सबमिट नहीं किया जाएगा; कोई पेज रीलोड, या तो।

संबंधित मुद्दे