HTML formunda birden çok gönderme düğmesi

263

HTML biçiminde bir sihirbaz oluşturduğunuzu varsayalım. Bir düğme geri gider ve bir düğme ileri gider. Yana geri tuşuna bastığınızda buton ilk biçimlendirme görünür Enter, bu formu göndermek için bu düğmeyi kullanacaktır.

Misal:

<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>
Snippet'i genişlet

Bir kullanıcı bastığında formu göndermek için hangi düğmenin kullanılacağına karar vermek istiyorum Enter. Bu şekilde, Entersihirbaza bastığınızda önceki sayfaya değil, sonraki sayfaya geçersiniz. Bunu tabindexyapmak için kullanmak zorunda mısınız?

html  forms  form-submit  submit-button 
— Kevin
kaynak

Yanıtlar:

142

Umarım bu yardımcı olur. Ben sadece floatsağ taraftaki düğmelerden hile yapıyorum .

Bu şekilde Prevdüğme düğmeden Nextayrılır, ancak NextHTML yapısında önce gelir:

.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>
Snippet'i genişlet

Diğer önerilere göre avantajlar: JavaScript kodu yok, erişilebilir ve her iki düğme de var type="submit".

— palotasb
kaynak
23
Lütfen sekme sırasını da değiştirmeden bunu yapmayın, böylece sekme düğmesine basmak ekranda göründükleri gibi düğmeler arasında geçiş yapar.
— Steve
61

Önceki düğme türünü aşağıdaki gibi bir düğmeye değiştirin: 

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

Şimdi İleri düğmesi varsayılan olacaktır, ayrıca defaulttarayıcınızın şu şekilde vurgulaması için özelliği de ekleyebilirsiniz :

<input type="submit" name="next" value="Next Page" default />
— Wally Lawless
kaynak
39
Hangi defaultözellikten bahsediyorsun? Geçerli olacak "varsayılan" özellik yoktur: w3.org/html/wg/drafts/html/master/… (HTML5'te değil, HTML 4.01 Geçiş / Katı, XHTML 1.0 Katı). Giriş tipini değiştirerek Ve neden görmüyorum submitiçin buttondaha iyi olurdu. Bir formda sorunsuz olarak birden fazla gönderme türü giriş öğeniz olabilir. Bu cevabın neden bu kadar yükseltildiğini gerçekten anlamıyorum.
— Sk8erPeter
3
"Button" türünde bir girdi olması form eylemini yürütmez. Bir onclick ya da bir şeye sahip olabilirsiniz, böylece "varsayılan" form eyleminden ("gönder" -tipi düğmesine basılarak yürütülür) başka bir işlev yürütülür. Ben de öyle aradım ve bu yüzden onu iptal ettim. "Varsayılan" özellik için konuşamıyor, benim sorunumun bir parçası değildi;) açıklamanız için teşekkürler.
— Jonas
2
@ Sk8erPeter, @Jonas .... hmm .. Bu defaultözelliğin Global bir özellik olduğundan şüpheleniyorum ; numaralandırma durumlarıyla ilgili olan numaralandırılmış öznitelik: w3.org/html/wg/drafts/html/master/… . o noktadan ayrı olarak .. Bu cevabın düğme yönü bir cevap değil .. bir ' koşullu öneri ' ya da bir sorgu ( sorunun kendisi ).
— Brett Caswell
3
@Jonas: evet, type="button"formu göndermez, type="submit"yapar, ancak bu düğmelerin türünü değiştirmek kesinlikle bir çözüm değildir, çünkü bu düğmeler temelde aynı şekilde davranmalıdır - OP'nin sorusu, "İleri" düğmesini Enter tuşuna basmak için varsayılan değerdir. Ve kabul edilen cevapta olası bir çözüm var.
— Sk8erPeter
4
@BrettCaswell: Bu düğmelerin türünü değiştirmek kötü bir çözümdür (önceki yorumuma bakın). HTML'de (daha önce belirttiğim gibi) etiketler defaultiçin geçerli bir özellik yoktur inputve (popüler) tarayıcılar bu özelliğe sahip düğmeyi VURMAYACAKTIR, bu da bu özelliğin standart dışı bir uygulaması olmadığı anlamına gelir - bu yüzden hala bilmiyorum @Wally Lawless ne hakkında konuşuyordu ve bu cevabın neden bu kadar abartılı olduğunu. defaultHTML5, ancak AMA yalnızca şu <track>etiket için geçerli bir geçerli özellik vardır : developer.mozilla.org/en-US/docs/Web/HTML/Element/track
— Sk8erPeter
56

Gönder düğmelerinize şu şekilde aynı adı verin:

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

Kullanıcı düğmesine bastığında Enterve istek sunucuya gittiğinde, sunucu çifti submitButtonkodunuzun form name/valueçiftlerini içeren değerini kontrol edebilirsiniz . Örneğin, ASP Classic'te :

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

Referans: Tek bir formda birden çok gönderme düğmesi kullanma

— huseyint
kaynak
26
Kullanıcının sorduğu şey bu değil. Kullanıcı, enter tuşuna basıldığında formdaki hangi gönderme düğmesinin etkinleştirileceğini nasıl kontrol edeceğini bilmek istedi. bu varsayılan düğmedir.
— kosoant
20
düğmenin etiketini bile bilmediğiniz bir I18n uygulamasında çalışmaz.
— Chris
Hangi sistem veya teknoloji çözümünde sunucunun kendisi, bir sonraki ve geri düğmesi için kullanılan etiketin ne olduğunu bilemez mi? Sunucu ilk etapta sonraki ve geri düğmesini üretmedi mi? (Yerelleştirme istemci tarafında işlenirse, sunucunun bilmeyebileceğini hayal ediyorum, ancak HTML için bunu hiç duymadım)
— Jacob
Bu cevap soruyu tamamen özlüyor, muhtemelen farklı bir soru için. Neden bu kadar çok oy alıyor ??? Düğmenin etiketini asla kontrol etmemesi gerektiğini söylememeliyim ... çok fazla sorun gerektirir. Basit durum bile: "dizeyi 'Önceki Sayfa' olarak kısaltmamız gerekir" sitelerinizin işlevselliğini bozacaktır.
— Tylla
30

İlk düğmenin varsayılan olarak kullanıldığı gerçeği tarayıcılar arasında tutarlıysa, bunları kaynak koduna doğru şekilde yerleştirin ve sonra görünür konumlarını değiştirmek için CSS kullanın.

float görsel olarak değiştirmek için sola ve sağa doğru.

— Polsonby
kaynak
18

Bazen @palotasb tarafından sağlanan çözüm yeterli olmaz. Örneğin, "Sonraki ve Önceki" gibi düğmelerin üzerine "Filtre" gönder düğmesinin yerleştirildiği kullanım durumları vardır. Bunun için bir geçici çözüm buldum: Gizli bir div'de varsayılan gönderme düğmesi gibi davranması gereken gönderme düğmesini kopyalayın ve diğer gönderme düğmelerinin üzerindeki formun içine yerleştirin. Teknik olarak Enter tuşuna basıldığında görünür İleri düğmesine tıklamaktan farklı bir düğme ile gönderilecektir. Ancak ad ve değer aynı olduğundan, sonuçta hiçbir fark yoktur.

<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>
— netiul
kaynak
17

Formu göndermek için JavaScript kullanırdım. İşlev, form öğesinin OnKeyPress olayı tarafından tetiklenir veEnter anahtarın seçilip seçilmediğini . Bu durumda formu gönderir.

İşte bunun nasıl yapılacağı konusunda teknikler veren iki sayfa: 1 , 2 . Bunlara dayanarak, bir kullanım örneği ( buraya dayanarak ):

<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)" />
— Yaakov Ellis
kaynak
2
Javascript devre dışı bırakılırsa ne olur?
— Jon Winstanley
2
<! - ve -> Sen kullanmamalısınız JS dışarı yorum yapmak, bu etiketleri JavaScript dili belirteçleri olmayan
— Marecky
2
@Marecky JS'ye yorum yapmıyorlar. <script> 'i destekleyen bir tarayıcıda <script> içeriği ayrıştırılırken yok sayılırlar. Bugün gerçekten gerekli değiller. Ancak çok eski tarayıcılarda, komut dosyasının düz metin olarak yazdırılmasını önlemek için bir uyumluluk hackiydi.
— leemes
17

Gerçekten bir yükleme iletişim kutusu gibi çalışmasını istiyorsanız, "İleri" düğmesine OnLoad odaklanın.

Bu şekilde kullanıcı isabet ederse, Returnform gönderilir ve ilerler. Geri dönmek istiyorlarsa Tabdüğmeye basabilir veya tıklayabilirler.

— Scott Gottreu
kaynak
2
Yani birisi bir formu doldurur ve bir metin alanındayken dönüşü vurur.
— Jordan Reiter
17

Bu saf HTML ile yapılamaz. Bu hile için JavaScript'e güvenmelisiniz.

Ancak, HTML sayfasına iki form yerleştirirseniz bunu yapabilirsiniz.

Form1 önceki düğmeye sahip olurdu.

Form2'de herhangi bir kullanıcı girişi + bir sonraki düğme bulunur.

Kullanıcı EnterForm2'ye bastığında, Bir Sonraki Gönder düğmesi etkinleşir.

— sineklik
kaynak
16

CSS ile yapabilirsiniz.

Düğmeleri önce Nextdüğmeyle, daha sonra düğmeyle işaretlemeye koyun Prev.

Ardından istediğiniz şekilde görünecek şekilde konumlandırmak için CSS kullanın.

— qui
kaynak
14

Bu, çoğu tarayıcıda JavaScript veya CSS olmadan çalışır:

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

Firefox, Opera, Safari ve Google Chrome hepsi çalışır.
Her zaman olduğu gibi, sorun Internet Explorer'dır.

Bu sürüm JavaScript açıldığında çalışır:

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

Yani bu çözümdeki kusur:

JavaScript kapalıyken Internet Explorer kullanıyorsanız Önceki Sayfa çalışmaz.

Dikkat edin, geri düğmesi hala çalışıyor!

— Jolyon
kaynak
1
Javascript olmadan "önceki sayfa" düğmesini etkinleştiremezsiniz, çünkü type = "button"!
— Ocak'ta riskop
Önerinizle ilgili sorun, bir button type = "button" formunun gönderilmemesidir, bu nedenle temelde hiçbir şey yapmazken, çapa ile ikinci sürüm POST yerine bir GET oluşturacaktır.
— Tylla
12

Bir sayfada birden fazla etkin düğmeniz varsa, bunun gibi bir şey yapabilirsiniz:

EnterTuşa basarken tetiklemek istediğiniz ilk düğmeyi formdaki varsayılan düğme olarak işaretleyin. İkinci düğme Backspaceiçin klavyedeki düğmeyle ilişkilendirin . Olay Backspacekodu 8'dir.

$(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>
Snippet'i genişlet

— user1591131
kaynak
11

Sekme sırasını değiştirmek, bunu başarmak için gereken her şey olmalıdır. Basit tutun.

Başka bir basit seçenek, geri düğmesini HTML kodundaki gönder düğmesinden sonra koymak, ancak gönder düğmesinden önceki sayfada görünmesi için sola kaydırmak olacaktır.

— Kenny Johnson
kaynak
10 
<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page">

Tüm gönderme düğmelerinin adını aynı tutun - "önceki".

Tek fark value benzersiz değerlere sahip özniteliktir. Komut dosyasını oluştururken, bu benzersiz değerler, gönder düğmelerinden hangisine basıldığını anlamamıza yardımcı olacaktır.

Ve aşağıdaki kodlamayı yazın:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
— jayu
kaynak
Sorun, bir metin alanına enter tuşuna basmak, formu, istenen ile değil, ilk örnek düğmeyle göndermektir (örnekteki ikincisi). Formu göndermek için hangi gönderme düğmesinin kullanıldığını bulmak kolaydır ve bu soru değildi!
— riskop
Neden name="perv"?
— Peter Mortensen
10

Başka bir basit seçenek, geri düğmesini HTML kodundaki gönder düğmesinden sonra koymak, ancak sola kaydırmaktır, böylece gönder düğmesinden önceki sayfada görünür.

Sekme sırasını değiştirmek, bunu başarmak için gereken her şey olmalıdır. Basit tutun.

— Peter Mortensen
kaynak
10

Buna karşı ilk geldiğimde, seçimler hala basitliği için sevdiğim önceki / sonraki olmadığında bir onclick () / JavaScript hack'iyle geldim. Bu böyle devam ediyor:

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

Gönder düğmelerinden biri tıklatıldığında, istenen işlemi gizli bir alanda (formun ilişkili olduğu modelde yer alan bir dize alanıdır) saklar ve formu tüm kararları veren Denetleyiciye gönderir. Denetleyicide şunları yazmanız yeterlidir:

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

Ayrıca, dize ayrıştırmasını önlemek için sayısal işlem kodlarını kullanarak bunu biraz sıkabilirsiniz, ancak numaralandırmalarla oynatmazsanız, kod daha az okunabilir, değiştirilebilir ve kendi kendini belgelendirir ve ayrıştırma önemsizdir.

— MiddleAgedMutantNinjaProgrammer
kaynak
9

Gönderen https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

Form öğesinin varsayılan düğmesi, ağaç sahibindeki form sahibi o form öğesi olan ilk gönderme düğmesidir.

Kullanıcı aracısı, kullanıcının örtülü olarak bir form göndermesine izin veriyorsa (örneğin, bir metin alanı örtülü olarak odaklanırken "enter" tuşuna basan bazı platformlarda formu gönderirse) ...

Bir sonraki girdinin tür = "gönder" olması ve önceki girdinin tür = "düğme" olarak değiştirilmesi, istenen varsayılan davranışı vermelidir.

<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>
— nikkypx
kaynak
9

Ben denedim budur:

  1. Düğmelerinize farklı adlar verdiğinizden emin olmanız gerekir
  2. ifBu düğmelerden biri tıklanırsa gerekli eylemi gerçekleştirecek bir ifade yazın .

 

<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'de,

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

if(isset($_POST['next']))
{
    header("Location: next.html");
    die();
}
— Samuel Mugisha
kaynak
Sorun, bir metin alanına enter tuşuna basmak, formu, istenen ile değil, ilk örnek düğmeyle göndermektir (örnekteki ikincisi). Formu göndermek için hangi gönderme düğmesinin kullanıldığını bulmak kolaydır ve bu soru değildi!
— riskop
7

ASP düğmesinin UseSubmitBehaviorgönderme işleminin hangisini yapacağını ayarlamanızı sağlayan bir özelliğe sahip olduğunu anladığımda, yalnızca ASP.NET denetimleriyle aynı şey için bir yanıt bulmaya çalışırken bu soruya rastladım .

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

Birisi bunu yapmak için ASP.NET düğmesi yolunu arıyor.

— Barry Franklin
kaynak
6

JavaScript (burada jQuery) ile formu göndermeden önce önceki düğmeyi devre dışı bırakabilirsiniz.

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

Bunu dene..!

<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>
Snippet'i genişlet

— Gowtham Balusamy
kaynak
1

Bu şekilde çok benzer bir sorunu çözdüm:

  1. JavaScript etkinleştirilirse (günümüzde çoğu durumda), tüm gönderme düğmeleri JavaScript (jQuery) aracılığıyla sayfa yüklemedeki düğmelere " indirgenir ". " Bozulmuş " düğme türündeki düğmelerdeki tıklama olayları da JavaScript aracılığıyla işlenir.

  2. JavaScript etkinleştirilmemişse, form tarayıcıya birden fazla gönderme düğmesiyle sunulur. İsabet Bu durumda Enterbir üzerinde textfieldform içinde yerine amaçlanan ilk düğmesi ile formu gönderecektir varsayılan , ama en azından şekli hala kullanılabilir: Her ikisine de sahip gönderebilirsiniz prev ve sonraki düğmeleri.

Çalışma örneği:

<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>
Snippet'i genişlet

— riskop
kaynak
0

Kullanabilirsiniz TabindexBu sorunu çözmek . Ayrıca düğmelerin sırasını değiştirmek bunu başarmanın daha etkili bir yolu olacaktır.

Düğmelerin sırasını değiştirin ve görünümünüzde floatgöstermek istediğiniz konumu atamak için değerler ekleyin HTML.

— Jyoti mishra
kaynak
-4

Verdiğiniz örneği kullanarak:

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

"Önceki Sayfa" yı tıklarsanız, yalnızca "önceki" değeri gönderilir. "Sonraki Sayfa" yı tıklarsanız, yalnızca "sonraki" değeri gönderilir.

Ancak, Enterformun herhangi bir yerine basarsanız , ne "önceki" ne de "sonraki" gönderilmez.

Yani sözde kod kullanarak aşağıdakileri yapabilirsiniz:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
— GateKiller
kaynak
1
Düğmelerin hiçbiri tetiklenmediğinde hiçbir zaman (js kullanmadan) bir durum olmaz. ENTER tuşuna basarsanız, koddaki ilk düğme olayı yakalar. Html örneğinde, bu bir önceki düğmedir.
— SimonSimCity
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.