एक HTML फॉर्म में एकाधिक सबमिट बटन

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

उदाहरण:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<form>
  <!-- put your cursor in this field and press Enter -->
  <input type="text" name="field1" />

  <!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />

  <!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</form>
</div> </div>

मैं क्या करना चाहता हूं, यह तय करना है कि जब कोई उपयोगकर्ता एंटर दबाता है तो फ़ॉर्म सबमिट करने के लिए कौन सा बटन उपयोग किया जाता है। इस तरह, जब आप एंटर द विज़ार्ड दबाएंगे, तो अगले पृष्ठ पर नहीं जाएगा, पिछले नहीं। क्या आपको ऐसा करने के लिए tabindex का उपयोग करना होगा?

0
जोड़ा संपादित
विचारों: 20

22 उत्तर

क्या आपके लिए पिछले बटन प्रकार को इस तरह के बटन में बदलना संभव होगा:

<input type="button" name="prev" value="Previous Page" />

अब अगला बटन डिफ़ॉल्ट होगा, साथ ही आप इसे डिफ़ॉल्ट विशेषता भी जोड़ सकते हैं ताकि आपका ब्राउज़र इसे इस तरह हाइलाइट करेगा:

<input type="submit" name="next" value="Next Page" default />

उम्मीद है की वो मदद करदे।

0
जोड़ा
@ ब्रेट कैसवेल: इन बटनों के प्रकार को बदलना एक खराब कामकाज है (मेरी पिछली टिप्पणी देखें)। HTML में input टैग्स (जैसा कि मैंने पहले बताया था) के लिए कोई वैध डिफ़ॉल्ट विशेषता नहीं है, और (लोकप्रिय) ब्राउज़र उस विशेषता को उस बटन को हाइलाइट नहीं करेंगे जिसमें यह विशेषता है, जिसका अर्थ है इस विशेषता का कोई गैर-मानक कार्यान्वयन नहीं है - इसलिए मुझे अभी भी पता नहीं है कि @ वाली लॉलेस किस बारे में बात कर रहा था, और यह जवाब इतना अतिरंजित क्यों है। एचटीएमएल 5 में केवल एक वैध <�कोड> डिफ़ॉल्ट विशेषता प्रस्तुत की गई है, लेकिन केवल <track> टैग के लिए:
जोड़ा लेखक Sk8erPeter, स्रोत
@ जोनास: हाँ, type = "बटन" फ़ॉर्म सबमिट नहीं करता है, type = "submit" करता है, लेकिन इन बटनों के प्रकार को बदलना निश्चित रूप से समाधान नहीं है , क्योंकि इन बटनों को मूल रूप से वही व्यवहार करना चाहिए - ओपी का सवाल यह था कि "अगला" बटन को एंटर कुंजी दबाकर डिफ़ॉल्ट कैसे बनाया जाए। और स्वीकृत उत्तर में एक संभावित समाधान है।
जोड़ा लेखक Sk8erPeter, स्रोत
आप किस डिफ़ॉल्ट विशेषता के बारे में बात कर रहे हैं? कोई "डिफ़ॉल्ट" विशेषता नहीं है, जो मान्य होगी: w3.org/html/wg/drafts/html/master/… ( एचटीएमएल 5 में नहीं, एचटीएमएल 4.01 संक्रमणकालीन / सख्त, एक्सएचटीएमएल 1.0 सख्त)। और मुझे नहीं लगता कि इनपुट कोड को submit से बटन में क्यों बदलना बेहतर होगा। आप बिना किसी समस्या के एक फॉर्म में एकाधिक सबमिट प्रकार इनपुट तत्व प्राप्त कर सकते हैं। मैं वास्त
जोड़ा लेखक Sk8erPeter, स्रोत
कभी नहीं .. मुझे बस एहसास हुआ कि वह वास्तव में इस जवाब में एक कामकाज प्रदान कर रहा था .. पहले इनपुट को एक बटन में बदलना ताकि दूसरा इनपुट इनपुट क्लिक को दबाए जाने पर क्लिक करें ... हालांकि .. अभी भी सशर्त
जोड़ा लेखक Brett Caswell, स्रोत
@ Sk8erPeter, @ जोनास .... हम्म .. मुझे संदेह है कि यह डिफ़ॉल्ट विशेषता वैश्विक विशेषता है; गणना की गई विशेषता .. जो गणना राज्यों से संबंधित है: w3.org/html/wg/drafts/html/master/… । उस बिंदु के अलावा .. इस उत्तर का बटन पहलू उत्तर नहीं है .. यह एक ' सशर्त सुझाव ' या एक क्वेरी है ( प्रश्न स्वयं )।
जोड़ा लेखक Brett Caswell, स्रोत
प्रकार "बटन" का इनपुट होने से फॉर्म एक्शन निष्पादित नहीं होता है। आपके पास एक ऑनक्लिक या कुछ हो सकता है, इस प्रकार "डिफ़ॉल्ट" फॉर्म एक्शन (जिसे "सबमिट" -टाइप बटन दबाकर निष्पादित किया जाता है) से दूसरे फ़ंक्शन को निष्पादित किया जा सकता है। यही वह था जिसे मैं ढूंढ रहा था और इसलिए मैंने इसे ऊपर उठाया। "डिफ़ॉल्ट" विशेषता के लिए बात नहीं कर सकता, मेरी समस्या का हिस्सा नहीं था;) हालांकि, आपकी स्पष्टीकरण के लिए धन्यवाद।
जोड़ा लेखक Jonas, स्रोत

अपने सबमिट बटन को इस तरह का नाम दें:

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

जब उपयोगकर्ता एंटर दबाता है और अनुरोध सर्वर पर जाता है, तो आप अपने सर्वर-साइड कोड पर submit बटन के मान को देख सकते हैं जिसमें फ़ॉर्म name / मूल्य </कोड> जोड़े। उदाहरण के लिए क्लासिक एएसपी में:

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for Previous Page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for Next Page
End If

Reference: Using multiple submit buttons on a single form

0
जोड़ा
यह वह नहीं है जिसे उपयोगकर्ता ने पूछा था। उपयोगकर्ता यह जानना चाहता था कि एंटर दबाए जाने पर फॉर्म में कौन से सबमिट बटन को सक्रिय किया जाता है यानी सक्रिय किया जाता है। जो डिफ़ॉल्ट बटन है।
जोड़ा लेखक kosoant, स्रोत
I18n एप्लिकेशन में काम नहीं करता है जहां आप बटन के लेबल को भी नहीं जानते हैं।
जोड़ा लेखक Chris, स्रोत

यदि तथ्य यह है कि डिफ़ॉल्ट रूप से पहला बटन उपयोग किया जाता है तो ब्राउज़र में लगातार होता है, तो उन्हें स्रोत कोड में सही तरीके से क्यों न रखें, फिर अपनी स्पष्ट स्थिति स्विच करने के लिए सीएसएस का उपयोग करें? उदाहरण के लिए, float उन्हें दृष्टि से चारों ओर स्विच करने के लिए बाएं और दाएं।

0
जोड़ा

मैं फॉर्म जमा करने के लिए जावास्क्रिप्ट का उपयोग करूंगा। फ़ंक्शन तत्व तत्व की ऑनकेपप्रेस ईवेंट द्वारा ट्रिगर किया जाएगा, और यह पता लगाएगा कि एंटर कुंजी का चयन किया गया था या नहीं। यदि ऐसा है, तो यह फॉर्म जमा करेगा।

यहां दो पृष्ठ दिए गए हैं जो इस बारे में तकनीकें देते हैं: 1 , 2 । इनके आधार पर, यहां उपयोग का एक उदाहरण है ( यहां पर आधारित):

<script TYPE="text/javascript"><!--
function submitenter(myfield,e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) { 
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 13) {
    myfield.form.submit();
    return false;
  } else {
    return true;
  }
}
//--></script>

<input NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />
0
जोड़ा
जावास्क्रिप्ट अक्षम होने पर क्या होता है?
जोड़ा लेखक Jon Winstanley, स्रोत
@Marecky वे जेएस टिप्पणी करने के लिए नहीं हैं। ब्राउज़र स्क्रिप्ट <script> में <script> की सामग्री को पार्स करते समय उन्हें अनदेखा किया जाता है। आज वे वास्तव में आवश्यक नहीं हैं। लेकिन बहुत प्राचीन ब्राउज़रों में, स्क्रिप्ट टेक्स्ट के रूप में मुद्रित होने के लिए स्क्रिप्ट से बचने के लिए यह एक संगतता हैक था।
जोड़ा लेखक leemes, स्रोत
जेएस को टिप्पणी करने के लिए आपको का उपयोग नहीं करना चाहिए, ये टैग जावास्क्रिप्ट भाषा टोकन नहीं हैं
जोड़ा लेखक Marecky, स्रोत

आपके द्वारा दिए गए उदाहरण का उपयोग करना:

<form>
<input type="text" name="field1" /><!-- put your cursor in this field and press Enter -->
<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

यदि आप "पिछला पृष्ठ" पर क्लिक करते हैं तो केवल "prev" का मान सबमिट किया जाएगा। यदि आप "अगला पृष्ठ" पर क्लिक करते हैं तो केवल "अगला" का मान सबमिट किया जाएगा।

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

तो छद्म कोड का उपयोग करके आप निम्न कार्य कर सकते हैं:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
0
जोड़ा
जब कोई भी बटन ट्रिगर नहीं होता है तो कभी भी स्थिति नहीं होती है (जेएस का उपयोग किए बिना)। यदि आप कोड में पहला बटन दर्ज करते हैं तो ईवेंट को पकड़ लेंगे। एचटीएमएल-उदाहरण में यह पिछला बटन है।
जोड़ा लेखक SimonSimCity, स्रोत

यह सीएसएस के साथ काम कर सकते हैं

उन्हें अगले बटन के रूप में मार्कअप में पहले रखें, फिर अगला बटन अगला।

फिर उन तरीकों को प्रदर्शित करने के लिए उन्हें स्थिति देने के लिए सीएसएस का उपयोग करें

0
जोड़ा

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

<html>
<head>
    
</head>
<body>
    <form action="action" method="get">
        <div class="defaultsubmitbutton">
            <input type="submit" name="next" value="Next">
        </div>
        
<input type="text" name="filter"><input type="submit" value="Filter">
Filtered results <input type="radio" name="choice" value="1">Filtered result 1 <input type="radio" name="choice" value="2">Filtered result 2 <input type="radio" name="choice" value="3">Filtered result 3 <div> <input type="submit" name="prev" value="Prev"> <input type="submit" name="next" value="Next"> </div> </form> </body> </html>
0
जोड़ा

मूल रूप से एक ही चीज़ के उत्तर खोजने का प्रयास करते समय मैं इस सवाल पर आया, केवल एएसपीनेट नियंत्रणों के साथ, जब मुझे पता चला कि एएसपी बटन में UseSubmitBehavior नामक एक संपत्ति है जो आपको सेट करने की अनुमति देती है एक सबमिट कर रहा है।


बस अगर कोई ऐसा करने के लिए एएसपीनेट बटन के तरीके की तलाश में है।

0
जोड़ा

केविन, यह शुद्ध HTML के साथ नहीं किया जा सकता है। आपको इस चाल के लिए जावास्क्रिप्ट पर भरोसा करना चाहिए।

हालांकि, यदि आप HTML पृष्ठ पर दो रूप डालते हैं तो आप यह कर सकते हैं।

फॉर्म 1 में पिछले बटन होगा।

फॉर्म 2 में कोई भी उपयोगकर्ता इनपुट + अगला बटन होगा।

जब उपयोगकर्ता फॉर्म 2 में Enter दबाता है, तो अगला सबमिट बटन आग लग जाएगा।

0
जोड़ा

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

0
जोड़ा
उनका मतलब है कि कोई व्यक्ति एक फॉर्म भरता है और टेक्स्ट फ़ील्ड में वापसी करता है।
जोड़ा लेखक Jordan Reiter, स्रोत

आशा है कि ये आपकी मदद करेगा। मैं सिर्फ दाईं ओर दिए गए बटनों को float की चाल कर रहा हूं।

इस प्रकार पिछला बटन अगला बटन से छोड़ा गया है लेकिन अगला एचटीएमएल कोड में आता है:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.f {
  float: right;
}
.clr {
  clear: both;
}
<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>
</div> </div>

Edit: Benefits over other suggestions: no JavaScript, accessible, both buttons remain type="submit"

0
जोड़ा
कृपया टैब ऑर्डर को बदले बिना ऐसा न करें, ताकि टैब बटन पर क्लिक करने से स्क्रीन पर दिखाई देने वाले बटन के माध्यम से चक्र हो जाएगा।
जोड़ा लेखक Steve, स्रोत

केविन,

यह अधिकांश ब्राउज़रों में जावास्क्रिप्ट या सीएसएस के बिना काम करता है:

<form>

<input type="text" name="field1" />


<button type="button">Previous Page</button> <button type="submit">Next Page</button>

</form>

Firefox, Opera, Safari, Google Chrome all work.
As always, IE is the problem.

जावास्क्रिप्ट चालू होने पर यह संस्करण काम करता है:

<form>

<input type="text" name="field1" />


<button type="button" onclick="window.location='previous.html'">Previous Page</button> <button type="submit">Next Page</button>

</form>

So the flaw in this solution is:
Previous Page does not work if you use IE with Javascript off.
Mind you, the back button still works!

0
जोड़ा
जावास्क्रिप्ट के बिना आप "पिछले पृष्ठ" बटन को सक्रिय करने में सक्षम नहीं होंगे, क्योंकि टाइप = "बटन"!
जोड़ा लेखक riskop, स्रोत

सभी सबमिट बटनों का नाम वही रखें - "पिछला" अद्वितीय मानों के साथ value विशेषता केवल अंतर है। जब हम स्क्रिप्ट बनाते हैं, तो ये अनूठे मूल्य हमें यह जानने में मदद करेंगे कि सबमिट बटन कौन से दबाए गए थे।

और follwing कोडिंग लिखें:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
0
जोड़ा
समस्या यह है कि एक टेक्स्ट फ़ील्ड में प्रवेश करने से पहले सबमिट बटन के साथ फ़ॉर्म सबमिट किया जाएगा, इरादे से नहीं (उदाहरण में दूसरा वाला)। फ़ॉर्म सबमिट करने के लिए सबमिट बटन का उपयोग करना आसान था, और यह सवाल नहीं था!
जोड़ा लेखक riskop, स्रोत

टैब ऑर्डर को बदलना इसे पूरा करने के लिए किया जाना चाहिए। इसे सरल रखें।

एक और आसान विकल्प एचटीएमएल कोड में सबमिट बटन के बाद बैक बटन डालना होगा, लेकिन इसे बाएं तरफ तैरना होगा ताकि सबमिट बटन से पहले पेज पर दिखाई दे।

0
जोड़ा

मैंने यही कोशिश की है: 1. आपको यह सुनिश्चित करने की ज़रूरत है कि आप अपने बटन अलग-अलग नाम दें 2. यदि कोई कथन क्लिक किया गया है तो एक कथन कथन लिखें जो आवश्यक कार्रवाई करेगा।

<form>
<input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->

<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

PHP में,

if(isset($_POST['prev']))
{
header("Location: previous.html");
die();
}

if(isset($_POST['next']))
{
header("Location: next.html");
die();

}
0
जोड़ा
समस्या यह है कि एक टेक्स्ट फ़ील्ड में प्रवेश करने से पहले सबमिट बटन के साथ फ़ॉर्म सबमिट किया जाएगा, इरादे से नहीं (उदाहरण में दूसरा वाला)। फ़ॉर्म सबमिट करने के लिए सबमिट बटन का उपयोग करना आसान था, और यह सवाल नहीं था!
जोड़ा लेखक riskop, स्रोत

यदि आपके पास एक पृष्ठ पर कई सक्रिय बटन हैं तो आप ऐसा कुछ कर सकते हैं:

फ़ॉर्म पर डिफॉल्टबटन के रूप में Enter keypress पर ट्रिगर्स चाहते हैं, पहले बटन को चिह्नित करें। दूसरे बटन के लिए इसे कीबोर्ड पर बैकस्पेस बटन से संबद्ध करें। बैकस्पेस eventcode 8 है।

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).on("keydown", function(event) {
  if (event.which.toString() == "8") {
    var findActiveElementsClosestForm = $(document.activeElement).closest("form");

    if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) {
      $("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").trigger("click");
    }
  }
});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

<form action="action" method="get" defaultbutton="TriggerOnEnter">
  <input type="submit" id="PreviousButton" name="prev" value="Prev" class="secondary_button" />
  <input type="submit" id='TriggerOnEnter' name="next" value="Next" class="primary_button" />
</form>
</div> </div>

उम्मीद है की यह मदद करेगा।

0
जोड़ा

From https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

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

     

यदि उपयोगकर्ता एजेंट उपयोगकर्ता को फॉर्म भरने के लिए समर्थन देने का समर्थन करता है   (उदाहरण के लिए, पाठ के दौरान "एंटर" कुंजी मारने वाले कुछ प्लेटफॉर्म पर   क्षेत्र फोकस केंद्रित है फॉर्म रूप से जमा करता है) ...

अगला इनपुट होने के बाद टाइप करें "सबमिट करें" और पिछले इनपुट को टाइप करने के लिए = "बटन" को वांछित डिफ़ॉल्ट व्यवहार देना चाहिए।

<form>
   <input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->

   <input type="button" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
   <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>
0
जोड़ा

जावास्क्रिप्ट (यहां jQuery) के साथ, आप फ़ॉर्म सबमिट करने से पहले पिछला बटन अक्षम कर सकते हैं।

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
0
जोड़ा

पहली बार जब मैं इसके खिलाफ आया तो मैं एक ऑनक्लिक() / जेएस हैक के साथ आया जब विकल्प चालू नहीं होते / अगले कि मैं अभी भी अपनी सादगी के लिए पसंद करता हूं। यह इस प्रकार चलता है:

@model myApp.Models.myModel    

<script type="text/javascript">
    function doOperation(op) {
        document.getElementById("OperationId").innerText = op;
        // you could also use Ajax to reference the element.
    }
</script>

<form>
  <input type="text" id = "TextFieldId" name="TextField" value="" />
  <input type="hidden" id="OperationId" name="Operation" value="" />
  <input type="submit" name="write" value="Write" onclick='doOperation("Write")'/>
  <input type="submit" name="read" value="Read" onclick='doOperation("Read")'/>
</form>

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

// Do operation according to which submit button was clicked
// based on the contents of the hidden Operation field.
if (myModel.Operation == "Read")
{
     // do read logic
}
else if (myModel.Operation == "Write")
{
     // do write logic
}
else
{
     // do error logic
}

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

0
जोड़ा

इसे इस्तेमाल करे..!

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<form>
  <input type="text" name="Name" />
  <!-- Enter the value -->

  <input type="button" name="prev" value="Previous Page" />
  <!-- This is the button that will submit -->
  <input type="submit" name="next" value="Next Page" />
  <!-- But this is the button that I WANT to submit -->
</form>
</div> </div>
0
जोड़ा

मैंने इस तरह से एक बहुत ही समान समस्या हल की:

  1. यदि जावास्क्रिप्ट सक्षम है (आजकल ज्यादातर मामलों में) तो सभी सबमिट बटन जावास्क्रिप्ट <�के माध्यम से पृष्ठ लोड पर बटनों पर " अपमानित " होते हैं। / कोड> (jquery)। " अपमानित " बटन पर दिए गए ईवेंट पर क्लिक करें बटन टाइप किए गए बटन जावास्क्रिप्ट के माध्यम से भी प्रबंधित किए जाते हैं।

  2. यदि जावास्क्रिप्ट सक्षम नहीं है तो फ़ॉर्म को एकाधिक सबमिट बटन वाले ब्राउज़र पर सेवा दी जाती है। इस मामले में फ़ॉर्म के अंदर textfield पर एंटर मारने से फ़ॉर्म डिफ़ॉल्ट के बजाय पहले बटन के साथ फ़ॉर्म सबमिट करेगा, लेकिन कम से कम फॉर्म अभी भी उपयोग योग्य है: आप कर सकते हैं पिछला और अगला बटन दोनों के साथ सबमिट करें।

कामकाजी उदाहरण:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
    <form action="http://httpbin.org/post" method="post">
    If JavaScript is disabled, then you CAN submit the form with button1, button2 or button3.
    If you press enter on a text field, then the form is submitted with the first submit button.

    If JavaScript is enabled, then the submit typed buttons without the 'defaultSubmitButton'
    style are converted to button typed buttons.

    If you press enter on a text field, then the form is submitted with the only submit button
    (the one with class defaultSubmitButton)
    If you click on any other button in the form, then the form is submitted with that button's
    value.
    
<input type="text" name="text1" >
<button type="submit" name="action" value="button1" >button 1</button>
<input type="text" name="text2" > <button type="submit" name="action" value="button2" >button 2</button>
<input type="text" name="text3" > <button class="defaultSubmitButton" type="submit" name="action" value="button3" >default button</button> </form> <script> $(document).ready(function(){ /* change submit typed buttons without the 'defaultSubmitButton' style to button typed buttons */ $('form button[type=submit]').not('.defaultSubmitButton').each(function(){ $(this).attr('type', 'button'); }); /* clicking on button typed buttons results in: 1. setting the form's submit button's value to the clicked button's value, 2. clicking on the form's submit button */ $('form button[type=button]').click(function( event ){ var form = event.target.closest('form'); var submit = $("button[type='submit']",form).first(); submit.val(event.target.value); submit.click(); }); }); </script> </body> </html>
</div> </div>
0
जोड़ा

आप इस समस्या को हल करने के लिए Tabindex का उपयोग कर सकते हैं, इसके अलावा बटन का क्रम बदलना इसे हासिल करने का अधिक प्रभावी तरीका होगा। बटन के क्रम को बदलें और फ़्लोट मानों को वांछित स्थिति असाइन करने के लिए जोड़ें जो आप अपने HTML व्यू में दिखाना चाहते हैं।

0
जोड़ा