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

वोट
233

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

उदाहरण:

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

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

01/08/2008 को 14:01
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


23 जवाब

वोट
133

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

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

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

28/08/2008 को 10:34
का स्रोत उपयोगकर्ता

वोट
60

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

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

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

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

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

01/08/2008 को 14:14
का स्रोत उपयोगकर्ता

वोट
53

अपने इस तरह बटन प्रस्तुत एक ही नाम दें:

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

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

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

संदर्भ: एकाधिक का उपयोग करते हुए एक ही रूप पर बटन प्रस्तुत

01/08/2008 को 14:10
का स्रोत उपयोगकर्ता

वोट
30

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

02/08/2008 को 12:24
का स्रोत उपयोगकर्ता

वोट
17

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

<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>
26/10/2012 को 10:53
का स्रोत उपयोगकर्ता

वोट
17

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

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

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

16/09/2008 को 13:16
का स्रोत उपयोगकर्ता

वोट
17

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

हालांकि, अगर आप HTML पृष्ठ पर दो रूपों जगह आप ऐसा कर सकते हैं।

Form1 पिछले बटन होगा।

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

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

26/08/2008 को 04:44
का स्रोत उपयोगकर्ता

वोट
17

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

26/08/2008 को 04:41
का स्रोत उपयोगकर्ता

वोट
15

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

: यहाँ दो पृष्ठों है कि ऐसा करने के तरीके पर तकनीक दे रहे हैं 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)" />
03/08/2008 को 14:12
का स्रोत उपयोगकर्ता

वोट
14

केविन,

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

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

फ़ायरफ़ॉक्स, ओपेरा, सफारी, गूगल क्रोम सब काम।
हमेशा की तरह, आईई समस्या है।

इस संस्करण में काम करता है जब JavaScript चालू है:

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

तो इस समाधान में दोष है:
पिछले पृष्ठ अगर तुम बंद जावास्क्रिप्ट के साथ IE का उपयोग काम नहीं करता।
ध्यान रहे, वापस बटन अभी भी काम करता है!

16/09/2008 को 12:19
का स्रोत उपयोगकर्ता

वोट
13

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

मार्क पहला बटन आप चाहते हैं पर चलाता है Enterफार्म पर defaultbutton के रूप में कुंजी दबाने। दूसरा बटन के लिए करने के लिए संबद्ध 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>

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

14/03/2014 को 15:51
का स्रोत उपयोगकर्ता

वोट
12

एक और सरल विकल्प वापस बटन लगाना के बाद एचटीएमएल कोड में सबमिट बटन लेकिन बाईं ओर उसमें बदलाव तो यह सबमिट बटन से पहले पृष्ठ पर दिखाई देता होगा।

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

14/10/2014 को 17:02
का स्रोत उपयोगकर्ता

वोट
12

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

एक और सरल विकल्प वापस बटन लगाना के बाद एचटीएमएल कोड में सबमिट बटन लेकिन बाईं ओर उसमें बदलाव तो यह सबमिट बटन से पहले पृष्ठ पर दिखाई देता होगा।

27/11/2012 को 23:27
का स्रोत उपयोगकर्ता

वोट
11

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

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

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
05/06/2012 को 10:19
का स्रोत उपयोगकर्ता

वोट
10

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

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

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

03/09/2015 को 13:30
का स्रोत उपयोगकर्ता

वोट
10

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

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

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

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

<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>
28/03/2015 को 21:05
का स्रोत उपयोगकर्ता

वोट
10

यह वही है मैं बाहर की कोशिश की है है: 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>

पीएचपी में,

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

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

}
03/03/2014 को 07:16
का स्रोत उपयोगकर्ता

वोट
8

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

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

शायद ज़रुरत पड़े किसी asp.net बटन तरीका यह करने के लिए की तलाश में है।

24/03/2016 को 17:29
का स्रोत उपयोगकर्ता

वोट
7

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

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
14/08/2015 को 10:01
का स्रोत उपयोगकर्ता

वोट
0

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

25/04/2018 को 06:28
का स्रोत उपयोगकर्ता

वोट
0

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

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

  2. अगर javascriptफिर से सक्षम नहीं है प्रपत्र कई प्रस्तुत बटन के साथ ब्राउज़र को परोसा जाता है। इस मामले हिटिंग में एक पर दर्ज 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>

09/01/2018 को 15:26
का स्रोत उपयोगकर्ता

वोट
0

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

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

29/09/2017 को 04:58
का स्रोत उपयोगकर्ता

वोट
-3

उदाहरण आप दे दी है का उपयोग करना:

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

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

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

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

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
05/08/2008 को 16:08
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more