Beberapa tombol kirim dalam bentuk HTML

263

Katakanlah Anda membuat wizard dalam bentuk HTML. Satu tombol kembali, dan satu maju. Karena tombol kembali muncul pertama kali di markup ketika Anda menekan Enter, itu akan menggunakan tombol itu untuk mengirimkan formulir.

Contoh:

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

Saya ingin memutuskan tombol mana yang digunakan untuk mengirimkan formulir ketika pengguna menekan Enter. Dengan begitu, saat Anda menekan Enterwizard akan pindah ke halaman berikutnya, bukan yang sebelumnya. Apakah Anda harus menggunakannya tabindexuntuk melakukan ini?

html forms form-submit submit-button Kevin
sumber

Jawaban:

142

Saya harap ini membantu. Saya hanya melakukan trik floatmemasukkan tombol ke kanan.

Dengan cara ini, Prevtombol berada di sebelah kiri Nexttombol, tetapi yang Nextpertama muncul dalam struktur HTML:

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

Manfaat dibandingkan saran lain: tidak ada kode JavaScript, dapat diakses, dan kedua tombol tetap ada type="submit".

palotasb
sumber
23
Tolong jangan lakukan ini tanpa juga mengubah urutan tab, sehingga menekan tombol tab akan menggilir tombol seperti yang muncul di layar.
Steve
61

Ubah jenis tombol sebelumnya menjadi tombol seperti ini: 

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

Sekarang tombol Next akan menjadi default, ditambah Anda juga bisa menambahkan defaultatribut sehingga browser Anda akan menyorotnya seperti:

<input type="submit" name="next" value="Next Page" default />
Wally Lawless
sumber
39
defaultAtribut apa yang Anda bicarakan? Tidak ada atribut "default", yang akan valid: w3.org/html/wg/drafts/html/master/… (tidak dalam HTML5, HTML 4.01 Transitional / Strict, XHTML 1.0 Strict). Dan saya tidak melihat mengapa mengubah jenis input dari submitke buttonakan lebih baik. Anda dapat memiliki beberapa elemen input jenis kirim dalam satu bentuk tanpa masalah. Saya tidak benar-benar mengerti mengapa jawaban ini sangat terangkat.
Sk8erPeter
3
Memiliki input tipe "tombol" tidak menjalankan aksi formulir. Anda dapat memiliki onclick atau sesuatu, dengan demikian mengeksekusi fungsi lain selain dari aksi bentuk "default" (yang dijalankan dengan menekan tombol ketik "kirim"). Itulah yang saya cari dan itulah mengapa saya menaikkannya. Tidak dapat berbicara untuk atribut "default", bukan bagian dari masalah saya;) terima kasih atas klarifikasi Anda.
Jonas
2
@ Sk8erPeter, @Jonas .... hmm .. Saya menduga defaultatribut ini adalah atribut Global; atribut enumerated .. yang terkait dengan status enumerasi: w3.org/html/wg/drafts/html/master/… . terlepas dari titik itu .. aspek tombol dari jawaban ini bukanlah jawaban .. itu adalah ' saran bersyarat ' atau kueri ( pertanyaan itu sendiri ).
Brett Caswell
3
@Jonas: ya, type="button"tidak mengirimkan formulir, type="submit"ya, tetapi mengubah jenis tombol ini jelas bukan solusi, karena tombol-tombol ini pada dasarnya harus berperilaku dengan cara yang sama - pertanyaan OP adalah bagaimana membuat tombol "Next" menjadi default untuk menekan tombol Enter. Dan ada solusi yang memungkinkan dalam jawaban yang diterima.
Sk8erPeter
4
@ BrettCaswell: mengubah jenis tombol-tombol ini merupakan solusi yang buruk (lihat komentar saya sebelumnya). Tidak ada defaultatribut yang valid untuk inputtag (seperti yang saya sebutkan sebelumnya) dalam HTML, dan browser (populer) TIDAK akan menyorot tombol yang memiliki atribut ini, yang berarti tidak ada implementasi atribut ini yang tidak standar - jadi saya masih tidak tahu apa yang @Wally Lawless bicarakan, dan mengapa jawaban ini sangat berlebihan. Hanya ada satu defaultatribut yang valid yang diperkenalkan dalam HTML5, TETAPI hanya untuk <track>tag: developer.mozilla.org/en-US/docs/Web/HTML/Element/track
Sk8erPeter
56

Berikan tombol kirim Anda nama yang sama seperti ini:

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

Ketika pengguna menekan Enterdan permintaan pergi ke server, Anda bisa memeriksa nilainya untuk submitButtonkode sisi server Anda yang berisi kumpulan name/valuepasangan formulir . Misalnya, dalam ASP Classic :

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

Referensi: Menggunakan beberapa tombol kirim pada satu formulir

huseyint
sumber
26
Ini bukan yang diminta pengguna. Pengguna ingin tahu cara mengontrol tombol kirim mana dalam bentuk yang diaktifkan ketika enter ditekan yaitu. yang merupakan tombol default.
kosoant
20
tidak bekerja di aplikasi I18n di mana Anda bahkan tidak tahu label tombolnya.
Chris
Dalam solusi sistem atau teknologi apa server itu sendiri tidak tahu label apa yang digunakan untuk tombol berikutnya dan kembali? Bukankah server menghasilkan tombol berikutnya dan kembali di tempat pertama? (Jika lokalisasi ditangani di sisi klien, saya membayangkan server mungkin tidak tahu, tapi saya belum pernah mendengar ini untuk HTML)
Jacob
Jawaban ini benar-benar merindukan pertanyaan, kemungkinan untuk pertanyaan yang berbeda. Mengapa begitu banyak upvotes ??? Belum lagi bahwa orang tidak boleh memeriksa label tombol ... panggilan untuk banyak masalah. Bahkan kasus sederhana: "kita harus menyingkat string menjadi 'Sebelumnya. Halaman'" akan merusak fungsi situs Anda.
Tylla
30

Jika fakta bahwa tombol pertama digunakan secara default konsisten di seluruh browser, letakkan di sebelah kanan dalam kode sumber, dan kemudian gunakan CSS untuk mengubah posisi semula.

float mereka ke kiri dan kanan untuk mengubahnya secara visual, misalnya.

Polsonby
sumber
18

Terkadang solusi yang disediakan oleh @palotasb tidak mencukupi. Ada kasus penggunaan di mana misalnya tombol kirim "Filter" ditempatkan di atas tombol seperti "Next dan Previous". Saya menemukan solusi untuk ini: salin tombol kirim yang perlu bertindak sebagai tombol kirim default di div tersembunyi dan letakkan di dalam formulir di atas tombol kirim lainnya. Secara teknis itu akan dikirimkan oleh tombol yang berbeda saat menekan Enter daripada ketika mengklik tombol Next yang terlihat. Tetapi karena nama dan nilainya sama, tidak ada perbedaan dalam hasilnya.

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

Saya akan menggunakan JavaScript untuk mengirimkan formulir. Fungsi akan dipicu oleh peristiwa OnKeyPress dari elemen bentuk dan akan mendeteksi apakahEnter kunci itu dipilih. Jika demikian, maka akan mengirimkan formulir.

Berikut adalah dua halaman yang memberikan teknik tentang cara melakukan ini: 1 , 2 . Berdasarkan ini, berikut adalah contoh penggunaan (berdasarkan di sini ):

<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
sumber
2
Apa yang terjadi jika javascript dinonaktifkan?
Jon Winstanley
2
Anda tidak boleh menggunakan <! - dan -> untuk mengomentari JS, tag ini bukan token bahasa Javascript
Marecky
2
@ Marsecky Mereka tidak mengomentari JS. Mereka diabaikan ketika mem-parsing konten <script> di browser yang mendukung <script>. Hari ini mereka benar-benar tidak diperlukan. Tetapi di browser yang sangat kuno, ini adalah hack kompatibilitas untuk menghindari skrip yang akan dicetak sebagai teks biasa.
Tema
17

Jika Anda benar-benar hanya ingin itu berfungsi seperti dialog instal, cukup berikan fokus ke tombol "Next" OnLoad.

Dengan begitu jika pengguna mengklik Return, formulir mengirimkan dan maju. Jika mereka ingin kembali, mereka dapat menekan Tabatau mengklik tombol.

Scott Gottreu
sumber
2
Maksudnya seseorang mengisi formulir dan klik kembali saat berada di bidang teks.
Jordan Reiter
17

Ini tidak dapat dilakukan dengan HTML murni. Anda harus mengandalkan JavaScript untuk trik ini.

Namun, jika Anda menempatkan dua formulir di halaman HTML Anda dapat melakukan ini.

Form1 akan memiliki tombol sebelumnya.

Form2 akan memiliki input pengguna + tombol selanjutnya.

Ketika pengguna menekan Enterdi Form2, tombol Kirim berikutnya akan menyala.

FlySwat
sumber
16

Anda bisa melakukannya dengan CSS.

Letakkan tombol di markup dengan Nexttombol pertama, laluPrev tombol sesudahnya.

Kemudian gunakan CSS untuk memposisikan mereka untuk tampil seperti yang Anda inginkan.

qui
sumber
14

Ini berfungsi tanpa JavaScript atau CSS di sebagian besar browser:

<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, dan Google Chrome semuanya berfungsi.
Seperti biasa, Internet Explorer adalah masalahnya.

Versi ini berfungsi saat JavaScript diaktifkan:

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

Jadi kelemahan dalam solusi ini adalah:

Halaman Sebelumnya tidak berfungsi jika Anda menggunakan Internet Explorer dengan menonaktifkan JavaScript.

Pikiran Anda, tombol kembali masih berfungsi!

Jolyon
sumber
1
Tanpa javascript Anda tidak akan dapat mengaktifkan tombol "halaman sebelumnya", karena jenis = "tombol"!
Riskop
Masalah dengan saran Anda adalah bahwa jenis tombol = "tombol" tidak akan memposting formulir, jadi pada dasarnya tidak melakukan apa-apa, sedangkan versi kedua dengan jangkar akan membuat GET daripada POST.
Tylla
12

Jika Anda memiliki beberapa tombol aktif pada satu halaman maka Anda dapat melakukan sesuatu seperti ini:

Tandai tombol pertama yang ingin Anda picu pada Enterpenekanan tombol sebagai tombol default pada formulir. Untuk tombol kedua, kaitkan dengan Backspacetombol pada keyboard. Kode Backspaceacara adalah 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>
Luaskan cuplikan

pengguna1591131
sumber
11

Mengubah urutan tab harus dilakukan untuk mencapai hal ini. Tetap sederhana.

Pilihan sederhana lainnya adalah dengan meletakkan tombol kembali setelah tombol kirim dalam kode HTML tetapi mengambang ke kiri sehingga muncul di halaman sebelum tombol kirim.

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

Simpan nama semua tombol kirim sama - "prev".

Satu-satunya perbedaan adalah value atribut dengan nilai unik. Saat kami membuat skrip, nilai-nilai unik ini akan membantu kami mengetahui tombol kirim mana yang ditekan.

Dan tuliskan kode berikut:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
jayu
sumber
Masalahnya adalah bahwa menekan enter pada bidang teks akan mengirimkan formulir dengan tombol kirim pertama, bukan dengan yang dimaksud (yang kedua dalam contoh). Mencari tahu tombol kirim mana yang digunakan untuk mengirimkan formulir itu mudah, dan itu bukan pertanyaannya!
Riskop
Mengapa name="perv"?
Peter Mortensen
10

Pilihan sederhana lainnya adalah dengan meletakkan tombol kembali setelah tombol kirim dalam kode HTML, tetapi mengapungkannya ke kiri, sehingga muncul di halaman sebelum tombol kirim.

Mengubah urutan tab harus dilakukan untuk mencapai hal ini. Tetap sederhana.

Peter Mortensen
sumber
10

Pertama kali saya menghadapi ini, saya datang dengan retas onclick () / JavaScript ketika pilihan tidak berlaku / selanjutnya yang saya masih suka karena kesederhanaannya. Bunyinya seperti ini:

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

Ketika salah satu tombol kirim diklik, ia menyimpan operasi yang diinginkan dalam bidang tersembunyi (yang merupakan bidang string yang termasuk dalam model yang terkait dengan formulir) dan mengirimkan formulir ke Controller, yang melakukan semua keputusan. Di Controller, Anda cukup menulis:

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

Anda juga dapat mengencangkannya sedikit menggunakan kode operasi numerik untuk menghindari penguraian string, tetapi kecuali jika Anda bermain dengan enumerasi, kode tersebut kurang dapat dibaca, dimodifikasi, dan didokumentasikan sendiri dan penguraiannya sepele.

Programme TengahMutantNinja
sumber
9

Dari https://html.spec.whatwg.org/multipage/forms.html#implicit-smission

Tombol default elemen form adalah tombol kirim pertama dalam urutan pohon yang pemilik formnya adalah elemen form.

Jika agen pengguna mendukung membiarkan pengguna mengirimkan formulir secara implisit (misalnya, pada beberapa platform menekan tombol "enter" saat bidang teks difokuskan secara implisit mengirimkan formulir) ...

Memiliki input berikutnya menjadi type = "submit" dan mengubah input sebelumnya menjadi type = "button" akan memberikan perilaku default yang diinginkan.

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

Inilah yang saya coba:

  1. Anda perlu memastikan Anda memberi nama tombol yang berbeda
  2. Tulis ifpernyataan yang akan melakukan tindakan yang diperlukan jika salah satu tombol diklik.

 

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

Dalam PHP,

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

if(isset($_POST['next']))
{
    header("Location: next.html");
    die();
}
Samuel Mugisha
sumber
Masalahnya adalah bahwa menekan enter pada bidang teks akan mengirimkan formulir dengan tombol kirim pertama, bukan dengan yang dimaksud (yang kedua dalam contoh). Mencari tahu tombol kirim mana yang digunakan untuk mengirimkan formulir itu mudah, dan itu bukan pertanyaannya!
Riskop
7

Saya menemukan pertanyaan ini ketika mencoba menemukan jawaban pada dasarnya hal yang sama, hanya dengan kontrol ASP.NET, ketika saya tahu bahwa tombol ASP memiliki properti yang disebut UseSubmitBehavioryang memungkinkan Anda untuk mengatur mana yang melakukan pengiriman.

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

Hanya dalam kasus seseorang mencari cara tombol ASP.NET untuk melakukannya.

Barry Franklin
sumber
6

Dengan JavaScript (di sini jQuery), Anda dapat menonaktifkan tombol prev sebelum mengirimkan formulir.

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

Coba ini..!

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

Gowtham Balusamy
sumber
1

Saya memecahkan masalah yang sangat mirip dengan cara ini:

  1. Jika JavaScript diaktifkan (dalam kebanyakan kasus saat ini) maka semua tombol kirim " terdegradasi " ke tombol saat memuat halaman melalui JavaScript (jQuery). Klik peristiwa pada " terdegradasi tombol" tombol diketik juga ditangani melalui JavaScript.

  2. Jika JavaScript tidak diaktifkan maka formulir disajikan ke browser dengan beberapa tombol kirim. Dalam hal ini menekan Enterdi textfielddalam formulir akan mengirimkan formulir dengan tombol pertama alih-alih default yang dimaksud , tetapi setidaknya formulir masih dapat digunakan: Anda dapat mengirim dengan tombol prev dan next .

Contoh kerja:

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

riskop
sumber
0

Anda dapat menggunakan Tabindexuntuk mengatasi masalah ini. Juga mengubah urutan tombol akan menjadi cara yang lebih efisien untuk mencapai ini.

Ubah urutan tombol dan tambahkan floatnilai untuk menetapkannya posisi yang diinginkan yang ingin Anda tunjukkan dalam HTMLtampilan Anda .

Jyoti mishra
sumber
-4

Menggunakan contoh yang Anda berikan:

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

Jika Anda mengklik "Halaman Sebelumnya", hanya nilai "sebelumnya" yang akan dikirimkan. Jika Anda mengklik "Halaman Berikutnya" hanya nilai "berikutnya" akan dikirimkan.

Namun, jika Anda menekan di Entersuatu tempat di formulir, "prev" atau "next" tidak akan dikirimkan.

Jadi menggunakan pseudocode Anda bisa melakukan hal berikut:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
GateKiller
sumber
1
Tidak pernah ada situasi (tanpa menggunakan js) ketika tidak ada tombol yang dipicu. Jika Anda menekan ENTER tombol pertama dalam kode akan menangkap acara. Dalam contoh html itu adalah tombol prev.
SimonSimCity