HTML फॉर्म में कई बटन सबमिट करें

Question

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

उदाहरण:

<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>

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

Answer 1

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

इस तरह से Prevबटन का बटन छोड़ दिया जाता है Next, लेकिन NextHTML संरचना में सबसे पहले आता है:

.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>

अन्य सुझावों पर लाभ: कोई जावास्क्रिप्ट कोड, सुलभ और दोनों बटन नहीं रहते type="submit"।

Comments

कृपया टैब क्रम को बदले बिना ऐसा न करें, ताकि स्क्रीन पर दिखाई देने के साथ बटन के माध्यम से टैब बटन टकराने लगे।

— स्टीव

Answer 2

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

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

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

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

Comments

आप किस defaultविशेषता के बारे में बात कर रहे हैं? कोई "डिफ़ॉल्ट" विशेषता नहीं है, जो मान्य होगी: w3.org/html/wg/drafts/html/master/… (HTML5 में नहीं, HTML 4.01 संक्रमणकालीन / सख्त, XHTML 1.0 सख्त)। और मैं देख नहीं क्यों से इनपुट प्रकार बदलने करते submitकरने के लिए buttonबेहतर होगा। आपके पास एक समस्या के बिना एक रूप में एकाधिक सबमिट प्रकार के तत्व हो सकते हैं। मुझे सच में समझ नहीं आ रहा है कि यह उत्तर इतना उलझा हुआ क्यों है।

— Sk8erPeter

टाइप "बटन" के इनपुट होने से फॉर्म एक्शन निष्पादित नहीं होता है। आपके पास एक ऑन्क्लिक या कुछ हो सकता है, इस प्रकार "डिफ़ॉल्ट" फॉर्म एक्शन (जो "सबमिट" -Type बटन दबाकर निष्पादित होता है) की तुलना में किसी अन्य फ़ंक्शन को निष्पादित करता है। यही मैं ढूंढ रहा था और इसीलिए मैंने इसे उकेरा। "डिफ़ॉल्ट" विशेषता के लिए बोल नहीं सकते, मेरी समस्या का हिस्सा नहीं था;) आपके स्पष्टीकरण के लिए धन्यवाद, यद्यपि।

— जोनास

@ Sk8erPeter, @Jonas .... hmm .. मुझे संदेह है कि यह defaultविशेषता एक वैश्विक विशेषता है; प्रगणित विशेषता .. जो गणन राज्यों से संबंधित है: w3.org/html/wg/drafts/html/master/… । उस बिंदु के अलावा .. इस उत्तर का बटन पहलू एक उत्तर नहीं है .. यह एक ' सशर्त सुझाव ' या एक प्रश्न ( स्वयं प्रश्न ) है।

— ब्रेट कैसवेल

@ जोनास: हां, type="button"फॉर्म सबमिट नहीं type="submit"करता है, लेकिन इन बटन के प्रकार को बदलना निश्चित रूप से एक समाधान नहीं है, क्योंकि इन बटन को मूल रूप से एक ही तरह से व्यवहार करना चाहिए - ओपी का सवाल था कि "अगला" बटन कैसे बनाया जाए Enter कुंजी दबाने के लिए डिफ़ॉल्ट। और स्वीकृत उत्तर में एक संभावित समाधान है।

— Sk8erPeter

@BrettCaswell: इन बटनों के प्रकार को बदलना एक बुरा काम है (मेरी पिछली टिप्पणी देखें)। HTML में टैग के defaultलिए कोई मान्य विशेषता नहीं है input(जैसा कि मैंने पहले कहा था), और (लोकप्रिय) ब्राउज़र उस बटन को उजागर नहीं करेंगे, जिसमें यह विशेषता है, जिसका अर्थ है कि इस विशेषता का कोई अमानवीय कार्यान्वयन नहीं है - इसलिए मुझे अभी भी नहीं पता है व्यक्तिगत रूप से लॉलेस किस बारे में बात कर रहे थे, और यह जवाब इतना अधिक क्यों है। defaultHTML5 में केवल एक मान्य विशेषता है, केवल <track>टैग के लिए BUT : developer.mozilla.org/en-US/docs/Web/HTML/Element/track

— Sk8erPeter

Answer 3

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

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

जब उपयोगकर्ता दबाता है Enterऔर अनुरोध सर्वर पर जाता है, तो आप submitButtonअपने सर्वर-साइड कोड के लिए मूल्य की जांच कर सकते हैं जिसमें प्रपत्र name/valueजोड़े का संग्रह होता है । उदाहरण के लिए, एएसपी क्लासिक में :

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

संदर्भ: एकल फ़ॉर्म पर एकाधिक सबमिट बटन का उपयोग करना

Comments

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

— कौनोसेंट

I18n एप्लिकेशन में काम नहीं करता है जहां आपको बटन का लेबल भी नहीं पता है।

— क्रिस

किस सिस्टम या टेक्नोलॉजी सॉल्यूशन में सर्वर खुद नहीं जान पाएगा कि अगले और बैक बटन के लिए किस लेबल का इस्तेमाल किया गया था? क्या सर्वर ने पहले और अगले बटन को पहले स्थान पर उत्पन्न नहीं किया था? (यदि स्थानीयकरण क्लाइंट की ओर से संभाला जाता है, तो मुझे लगता है कि सर्वर को पता नहीं हो सकता है, लेकिन मैंने HTML के लिए ऐसा कभी नहीं सुना है)

— जैकब

यह उत्तर पूरी तरह से प्रश्न को याद करता है, संभवतः यह एक अलग प्रश्न के लिए है। इतने अपवित्र क्यों ??? यह उल्लेख करने के लिए नहीं कि किसी को बटन के लेबल की जांच कभी नहीं करनी चाहिए ... बहुत परेशानी के लिए कहता है। यहां तक ​​कि साधारण मामला: "हमें स्ट्रिंग को 'पूर्व पृष्ठ' पर संक्षिप्त करना चाहिए" आपकी साइट की कार्यक्षमता को बर्बाद कर देगा।

— टायला

Answer 4

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

float उदाहरण के लिए, उन्हें नेत्रहीन चारों ओर स्विच करने के लिए बाएं और दाएं।

Answer 5

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

<html>
<head>
    <style>
        div.defaultsubmitbutton {
            display: none;
        }
    </style>
</head>
<body>
    <form action="action" method="get">
        <div class="defaultsubmitbutton">
            <input type="submit" name="next" value="Next">
        </div>
        <p><input type="text" name="filter"><input type="submit" value="Filter"></p>
        <p>Filtered results</p>
        <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>

Answer 6

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

यहां दो पृष्ठ दिए गए हैं जो यह करने की तकनीक देते हैं: 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)" />

Comments

यदि जावास्क्रिप्ट अक्षम है तो क्या होगा?

— जॉन विंस्टनले

आपको JS का उपयोग नहीं करना चाहिए <- और -> जेएस पर टिप्पणी करने के लिए, ये टैग जावास्क्रिप्ट भाषा टोकन नहीं हैं

— मारेकी

@Marecky वे JS पर टिप्पणी नहीं कर रहे हैं। <Script> का समर्थन करने वाले ब्राउज़र में <script> की सामग्री को पार्स करते समय उन्हें अनदेखा कर दिया जाता है। आज वे वास्तव में आवश्यक नहीं हैं। लेकिन बहुत प्राचीन ब्राउज़रों में, यह स्क्रिप्ट को सादे पाठ के रूप में मुद्रित करने से बचने के लिए एक संगतता हैक था।

— लेमेस

Answer 7

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

इस तरह अगर उपयोगकर्ता हिट करता है Return, तो फॉर्म सबमिट हो जाता है और आगे बढ़ जाता है। यदि वे वापस जाना चाहते हैं तो वे हिट Tabकर सकते हैं या बटन पर क्लिक कर सकते हैं ।

Comments

उनका मतलब है कि कोई व्यक्ति एक फॉर्म भरता है और एक पाठ क्षेत्र में वापसी करता है।

— जॉर्डन रीटर

Answer 8

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

हालाँकि, यदि आप HTML पेज पर दो फॉर्म रखते हैं तो आप ऐसा कर सकते हैं।

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

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

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

Answer 9

आप इसे सीएसएस के साथ कर सकते हैं।

Nextपहले बटन के साथ मार्कअप में बटन लगाएं, फिर बाद में Prevबटन।

फिर सीएसएस का उपयोग करके उन्हें जिस तरह से आप चाहते हैं उसे प्रकट करने के लिए स्थिति के लिए उपयोग करें।

Answer 10

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

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

फ़ायरफ़ॉक्स, ओपेरा, सफारी और Google क्रोम सभी काम करते हैं।
हमेशा की तरह, इंटरनेट एक्सप्लोरर समस्या है।

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

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

तो इस समाधान में दोष यह है:

यदि आप जावास्क्रिप्ट के साथ इंटरनेट एक्सप्लोरर का उपयोग करते हैं तो पिछला पृष्ठ काम नहीं करता है।

माइंड यू, बैक बटन अभी भी काम करता है!

Comments

जावास्क्रिप्ट के बिना आप "पिछले पृष्ठ" बटन को सक्रिय नहीं कर पाएंगे, क्योंकि टाइप = "बटन"!

— जोखिम

आपके सुझाव के साथ समस्या यह है कि एक बटन प्रकार = "बटन" फॉर्म को पोस्ट नहीं करेगा, इसलिए यह मूल रूप से कुछ भी नहीं करता है, जबकि एक एंकर के साथ दूसरा संस्करण POST के बजाय GET बनाएगा।

— टायला

Answer 11

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

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

$(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>

Answer 12

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

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

Answer 13

<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page"> 

सभी सबमिट बटन का नाम समान रखें - "प्रबल"।

फर्क सिर्फ इतना है value अद्वितीय मूल्यों के साथ विशेषता है। जब हम स्क्रिप्ट बनाते हैं, तो ये विशिष्ट मूल्य हमें यह पता लगाने में मदद करेंगे कि कौन सा सबमिट बटन दबाया गया था।

और निम्नलिखित कोडिंग लिखें:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if

Comments

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

— जोखिम

क्यों name="perv"?

— पीटर मोर्टेंसन

Answer 14

HTML कोड में सबमिट बटन के बाद बैक बटन लगाने का एक और सरल विकल्प होगा, लेकिन इसे बाईं ओर फ्लोट करें, इसलिए यह सबमिट बटन से पहले पृष्ठ पर दिखाई देगा।

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

Answer 15

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

@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
}

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

Answer 16

से 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>

Answer 17

यही मैंने आजमाया है:

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

 

<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();
}

Comments

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

— जोखिम

Answer 18

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

<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />

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

Answer 19

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

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

Answer 20

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

<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>

Answer 21

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

1. यदि जावास्क्रिप्ट को सक्षम किया जाता है (आजकल ज्यादातर मामलों में) तो सभी सबमिट बटन जावास्क्रिप्ट (jQuery) के माध्यम से पेज लोड के बटन पर " नीचा " होते हैं। जावास्क्रिप्ट के माध्यम से " अपमानित " बटन टाइप किए गए बटन पर क्लिक करें ।

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

कार्य उदाहरण:

<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.

            <br />

            <input type="text" name="text1" ></input>
            <button type="submit" name="action" value="button1" >button 1</button>
            <br />

            <input type="text" name="text2" ></input>
            <button type="submit" name="action" value="button2" >button 2</button>
            <br />

            <input type="text" name="text3" ></input>
            <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>

Answer 22

आप Tabindexइस समस्या को हल करने के लिए उपयोग कर सकते हैं । इसके अलावा बटनों के क्रम को बदलना इसे प्राप्त करने का एक अधिक कुशल तरीका होगा।

बटनों के क्रम को बदलें और floatउन्हें अपनी स्थिति में इच्छित स्थान निर्दिष्ट करने के लिए मान जोड़ें HTML।

Answer 23

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

<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>

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

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

तो pseudocode का उपयोग करके आप निम्नलिखित कार्य कर सकते हैं:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click

Comments

जब बटन में से कोई भी ट्रिगर नहीं होता है तो कभी भी कोई स्थिति नहीं होती है। यदि आप हिट करते हैं तो कोड में पहला बटन ईवेंट को पकड़ लेगा। Html- उदाहरण में यह प्रचलित बटन है।

— सिमोनसिमिटी