Birden bir HTML biçiminde Gönder düğmelerini

oy
233

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

Örnek:

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

Ben yapmak istiyorum ne bir kullanıcı presler girin zaman formu göndermek için kullanılan düğme karar almak olduğunu. Bu şekilde, sihirbaz önceki değil, sonraki sayfaya geçer Enter tuşuna bastığınızda. Kullanmak var mı tabindexbunun için?

Oluştur 01/08/2008 saat 14:01
kaynak kullanıcı
Diğer dillerde...                            


23 cevaplar

oy
133

Umarım bu yardımcı olur. Sadece bir hile yapıyorum floatsağdaki düğmeleri ing.

Bu şekilde Önceki düğme Sonraki düğmeye sol fakat Sonraki HTML kodundaki önce gelir edilir:

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

Düzenleme: diğer önerilerden üzerinde Faydaları: JavaScript yok, erişilebilir, her iki düğme kalırtype="submit"

Cevap 28/08/2008 saat 10:34
kaynak kullanıcı

oy
60

Eğer böyle bir düğme içine önceki düğme türünü değiştirmek mümkün olur muydu:

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

Şimdi İleri düğmesi varsayılan olacaktır, ayrıca da ekleyebilirsiniz defaulttarayıcınızın şöyle vurgulamak böylece ona niteliğini:

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

Umarım yardımcı olur.

Cevap 01/08/2008 saat 14:14
kaynak kullanıcı

oy
53

senin böyle düğmelerini aynı adı göndermek verin:

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

Kullanıcı presler girip zaman talep sunucuya gider, sizin için değerini kontrol edebilirsiniz submitButtonformu koleksiyonu içeren sunucu tarafı kod üzerinde name/valueçiftleri. Klasik ASP Örneğin:

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

Referans: birden kullanarak tek bir form düğmeleri gönderin

Cevap 01/08/2008 saat 14:10
kaynak kullanıcı

oy
30

İlk düğmesi varsayılan olarak kullanılıyor olması tarayıcılar arasında tutarlı ise, neden onlara kaynak kodunda doğru yol yuvarlak koymak değil, o zaman onların bariz pozisyonları geçmek için CSS kullanabilirsiniz? floatOnları örneğin, etrafında görsel onları geçmek için ve hakkını bıraktı.

Cevap 02/08/2008 saat 12:24
kaynak kullanıcı

oy
17

Bazen @palotasb tarafından sağlanan çözüm yeterli değildir. Örneğin bir gönderme "Filtre" düğmesi "ileri ve geri" gibi düğmeler üzerinde yerleştirilir kullanım örneği vardır. Bunun için bir çözüm bulundu: copy başka göndermek düğmesinin üzerinde gizli bir div gönder düğmesi ve form içine yerleştirin varsayılan olarak hareket etmesi gerekiyor Gönder düğmesini. Görünür Sonraki butonuna tıklandığında sonra Enter basıldığında Teknik olarak farklı bir düğme tarafından teslim edilecektir. Ad ve değer aynı olması itibariyle, sonuç açısından 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>
Cevap 26/10/2012 saat 10:53
kaynak kullanıcı

oy
17

Bu CSS ile çalışabilir

Bir sonraki, ilk sonraki düğme olarak işaretlemesinde ardından önceki düğmesine koyun.

Sonra istediğiniz şekilde görünmesini onları konumlandırmak için CSS kullanabilirsiniz

Cevap 16/09/2008 saat 13:16
kaynak kullanıcı

oy
17

Kevin, bu saf HTML ile yapılamaz. Bu numara için JavaScript güvenmek zorundadır.

HTML sayfasındaki iki formlar yerleştirmek Ancak, bunu yapabilirsin.

Form1 önceki düğme olurdu.

Form2 herhangi bir kullanıcı girişi yanındaki + düğmesini olurdu.

Kullanıcı bastığında EnterForm2, İleri düğmesi ateş de gönderebilirsiniz.

Cevap 26/08/2008 saat 04:44
kaynak kullanıcı

oy
17

Eğer gerçekten sadece sadece ne "İleri" butonuna OnLoad odağı verme konusunda bir kurma iletişim gibi çalışmak istiyorsanız. Kullanıcı Return vurur Böylece eğer, formu gönderiyor ve ileriye gider. onlar geri dönmek isterlerse Tab vurmak veya butonuna tıklayabilirsiniz.

Cevap 26/08/2008 saat 04:41
kaynak kullanıcı

oy
15

Ben formu göndermek için Javascript kullanmak. fonksiyon form öğesinin OnKeyPress olayı tetiklediği olacağını ve Enter tuşuna seçildi olmadığını tespit edecek. Bu durumda, bu formu gönderecektir.

: İşte bu nasıl yapılacağına ilişkin teknikler veren iki sayfalarıdır 1 , 2 . Bu göre, burada (göre kullanım örneğidir burada ):

<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)" />
Cevap 03/08/2008 saat 14:12
kaynak kullanıcı

oy
14

Kevin,

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, Google Chrome, tüm çalışma.
Her zaman olduğu gibi IE sorundur.

JavaScript açıldığında Bu sürüm ç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ümde kusur:
kapalı Javascript ile IE kullanıyorsanız Önceki Sayfa çalışmaz.
Bak, geri düğmesi hala çalışıyor!

Cevap 16/09/2008 saat 12:19
kaynak kullanıcı

oy
13

Bir sayfada birden çok etkin düğme varsa o zaman böyle bir şey yapabilirsiniz:

Mark istediğiniz ilk düğmesi tetikler Enterformdaki defaultButton olarak bir tuşa basarak. İkinci düğme için onu ilişkilendirmek Backspaceklavyedeki düğmeye. Backspaceeventcode 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>

Bu yardımcı olur umarım.

Cevap 14/03/2014 saat 15:51
kaynak kullanıcı

oy
12

HTML kodundaki gönder düğmesi ancak Gönder düğmesini önceki sayfada görünecek şekilde sola doğru yüzer sonra başka basit bir seçenek geri düğmesine koymak olacaktır.

o bunu gerçekleştirmek için gereken tüm olmalıdır sekme sırasını değiştirme. Basit tutun.

Cevap 14/10/2014 saat 17:02
kaynak kullanıcı

oy
12

o bunu gerçekleştirmek için gereken tüm olmalıdır sekme sırasını değiştirme. Basit tutun.

HTML kodundaki gönder düğmesi ancak Gönder düğmesini önceki sayfada görünecek şekilde sola doğru yüzer sonra başka basit bir seçenek geri düğmesine koymak olacaktır.

Cevap 27/11/2012 saat 23:27
kaynak kullanıcı

oy
11

"önceki" tek fark - tüm adını tutmak düğmeleri aynı göndermek valueeşsiz değerlere sahip özniteliği. Biz senaryoyu oluştururken, bu eşsiz değerler basılmış gönderme düğmeleri hangi anlamaya yardımcı olacaktır.

Ve kodlama follwing yazın:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
Cevap 05/06/2012 saat 10:19
kaynak kullanıcı

oy
10

seçimler hala basit olduğu için mi bir sonraki / önceki olmadığında ben onclick () ile geldi ben buna karşı gelen ilk zaman / js kesmek. 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>

tıklandığında ya gönderme düğmesini tüm karar yapar (form ile ilişkili olan modele dahil bir dize alanı olan) ve Kontrol Cihazına formu gönderen bir gizli alanda istenilen işlemi, saklar. Kontrolör olarak, sadece yazın:

// 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 hafifçe dize çözümlenmesi önlemek için sayısal Operasyon kodları kullanarak bu kadar sıkın, ancak numaralamalar ile oynamak sürece, kod değiştirilebilir, daha az okunabilir ve kendi kendini belgeleyen ve ayrıştırma zaten önemsiz olduğunu.

Cevap 03/09/2015 saat 13:30
kaynak kullanıcı

oy
10

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

Bir form öğesinin varsayılan düğme ilk kimin formu sahibinin form elemanıdır ağaç için düğmeye göndermektir.

Kullanıcı aracısı kullanıcı örtülü bir form göndermek icar destekliyorsa (bir metin alanı odaklı iken "enter" tuşuna basarak bazı platformlarda, örneğin örtülü formu gönderdiğinde) ...

Bir sonraki input type = "submit" ve önceki girişi değişen = yazmanız olmak Having "düğmesi" 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>
Cevap 28/03/2015 saat 21:05
kaynak kullanıcı

oy
10

Bu ben dışarı denedim budur: 1. Emin farklı isimler sizin düğmeleri 2. Yaz An vermek yapmanız gerekirse ya düğme tıklandığında ise gerekli eylemi yapacak beyanı.

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

}
Cevap 03/03/2014 saat 07:16
kaynak kullanıcı

oy
8

Ben asp düğmesi adlı bir özelliğe sahip olduğunu anladım zaman, sadece asp.net kontrolleri ile temelde aynı şey bir cevap bulmaya çalışırken bu soruya rastladım UseSubmitBehaviorsize gönderme mi hangisinin ayarlamanızı sağlar.

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

Her ihtimale karşı birileri bunu yapmak için asp.net düğme yolu aramaktadır.

Cevap 24/03/2016 saat 17:29
kaynak kullanıcı

oy
7

javascript (burada jQuery) ile, önceki düğme önce formu göndermek devre dışı bırakabilir.

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
Cevap 14/08/2015 saat 10:01
kaynak kullanıcı

oy
0

Sen kullanabilirsiniz TabindexAyrıca bunu başarmak için daha etkili bir yol olacağını düğmeye sırasını değiştirerek, bu sorunu çözmek için. Düğmenin sırasını değiştirme ve ekleme floatonlara sizin de göstermek istediğiniz istenilen pozisyon atamak için değerler HTMLgörünümüne.

Cevap 25/04/2018 saat 06:28
kaynak kullanıcı

oy
0

Ben bu şekilde çok benzer bir sorunu çözdü:

  1. eğer javascript(günümüzde çoğu durumda) etkinleştirildiğinde sonra tüm göndermek düğmeleri "dir bozulmuş aracılığıyla Sayfanın yüklendiği düğmeleri" javascript(jquery). "Etkinlikleri tıklayın bozulmuş " butonu Yazılan düğmeler aracılığıyla da işlenir javascript.

  2. eğer javascripto zaman etkin değildir form gönderme birden düğmeleri ile tarayıcıya servis edilir. Bu durumda vurmak bir enter textfieldilk düğmesinin yerine amaçlanan formu sunacaktır form içinde varsayılan , ama en azından şekli hala kullanılabilir: Her iki ile gönderebileceğiniz prev ve sonraki düğmeleri.

örnek çalışma:

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

Cevap 09/01/2018 saat 15:26
kaynak kullanıcı

oy
0

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>

Cevap 29/09/2017 saat 04:58
kaynak kullanıcı

oy
-3

Verdiğin ö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>

Eğer "Önceki Sayfa" "prev" sadece değerine tıklarsanız sunulacaktır. Eğer "Sonraki Sayfa" tıklarsanız sadece "sonraki" değeri sunulacaktır.

Ancak varsa, form üzerinde bir yere enter tuşuna ne "önceki" ne de "sonraki" sunulacaktır.

Yani şu yapabileceği sözde kodu kullanarak:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
Cevap 05/08/2008 saat 16:08
kaynak kullanıcı

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