Tombol HTML untuk TIDAK mengirimkan formulir

370

Saya punya formulir. Di luar formulir itu, saya punya tombol. Tombol sederhana, seperti ini:

<button>My Button</button>

Namun demikian, ketika saya mengkliknya, ia mengirimkan formulir. Berikut kodenya:

<form id="myform">
    <input />
</form>
<button>My Button</button>

Yang harus dilakukan tombol ini hanyalah JavaScript. Tetapi bahkan ketika itu terlihat seperti pada kode di atas, ia mengirimkan formulir. Ketika saya mengubah tombol tag ke span, ia bekerja dengan sempurna. Namun sayangnya, itu perlu tombol. Apakah ada cara untuk memblokir tombol itu dari mengirimkan formulir? Seperti misalnya

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

javascript html

— arik
sumber

3

Masalah ini tidak dapat direproduksi di peramban modern, dan masalahnya mungkin awalnya disebabkan oleh kesalahpahaman. Sementara default untuk buttonadalah type=submit, tidak ada formulir yang dikirimkan ketika buttonelemen berada di luar formulir apa pun. Kecuali demonstrasi yang sebenarnya (dokumen sampel, identifikasi browser, dan deskripsi pengamatan yang menunjukkan bahwa beberapa formulir dikirimkan) dapat diberikan, pertanyaan ini harus ditutup karena tidak dapat direproduksi. Menggunakan type=buttonadalah praktik yang baik, tetapi ini tidak membuat masalah menjadi nyata.

— Jukka K. Korpela

895

Saya pikir ini adalah kekhasan kecil yang paling menjengkelkan dari HTML ... Tombol itu harus bertipe "tombol" agar tidak mengirimkan.

<button type="button">My Button</button>

Pembaruan 5-Feb-2019: Sesuai dengan Standar Kehidupan HTML (dan juga spesifikasi HTML 5 ):

The hilang nilai default dan nilai yang tidak valid standar adalah Submit negara Button.

— Dave Markle
sumber

9

@Powerlave alasan apa pun untuk tidakto use <button>

— Sandip Pingle

4

@SandipPingle Tidak ada alasan untuk menggunakannya, kecuali jika Anda memerlukan gaya yang sangat kompleks. Juga, IE6 dan IE7 (untungnya dihapus) menangani <button>s yang salah dalam beberapa kasus. Selain itu, <button>tidak 100% kompatibel lintas-browser karena browser yang berbeda dapat mengirimkan nilai yang berbeda untuk yang sama <button>ketika digunakan dalam formulir.

— Powerslave

35

Ini adalah jawaban yang bagus, tetapi itu bukan kekhasan . Nilai default typeatribut dalam <button>tag adalah submit. Ketika diubah menjadi type=button, <button>tidak diberikan perilaku default. Lihat typeatribut di sini: developer.mozilla.org/en-US/docs/Web/HTML/Element/button

— Michael Benjamin

1

Jadi apa ide <button type='submit'>itu terlalu sulit bagiku haha. Bagaimanapun jawaban Anda bekerja dengan baik!

— divHelper11

2

Perilaku default (dan dengan demikian tersirat) dari elemen non-form-spesifik adalah untuk memicu fungsionalitas spesifik form yang berpotensi merusak. Bagaimana itu bukan keputusan desain khusus untuk membuat spesifikasi HTML?

— HonoredMule

36

return false;pada akhir handler onclick akan melakukan pekerjaan. Namun, lebih baik menambahkan type="button"saja <button>- dengan cara itu berperilaku baik bahkan tanpa JavaScript.

— Pencuri
sumber

1

Tombol yang tidak mengirimkan formulir hanya berguna jika JavaScript diaktifkan ... Saya setuju bahwa tipe = "tombol" lebih bersih.

— ThiefMaster

2

return false;tidak berfungsi di semua skenario, sementara type="Button"tidak. Bahkan dengan JavaScript yang diaktifkan.

— brejoc

15

Dave Markle benar. Dari situs web W3School :

Selalu tentukan atribut type untuk tombol. Jenis default untuk Internet Explorer adalah "tombol", sedangkan di browser lain (dan dalam spesifikasi W3C) adalah "kirim".

Dengan kata lain, browser yang Anda gunakan mengikuti spesifikasi W3C.

— Gert Grenander
sumber

15

Secara default, tombol html mengirimkan formulir.

Ini disebabkan oleh fakta bahwa bahkan tombol yang terletak di luar formulir bertindak sebagai submitter (lihat situs web W3Schools: http://www.w3schools.com/tags/att_button_form.asp )

Dengan kata lain, tipe tombol "kirim" secara default

<button type="submit">Button Text</button>

Oleh karena itu cara mudah untuk menyiasatinya adalah dengan menggunakan jenis tombol .

<button type="button">Button Text</button>

Pilihan lain termasuk mengembalikan false di akhir onclick atau penangan lainnya ketika tombol diklik, atau menggunakan tag <input> sebagai gantinya

Untuk mengetahui lebih lanjut, lihat informasi tombol Pengembang Jaringan Mozilla: https://developer.mozilla.org/en/docs/Web/HTML/Element/button

— GJZ
sumber

3

Disarankan untuk tidak menggunakan <Button>tag. Gunakan <Input type='Button' onclick='return false;'>tag sebagai gantinya. (Menggunakan "return false" seharusnya tidak mengirim formulir.)

Beberapa bahan referensi

— Tim
sumber

2

Cukup untuk digunakan <input type="button" />, dan cukup untuk return false;- tidak perlu melakukan keduanya.

— Tom

Saya tidak setuju bahwa disarankan untuk tidak menggunakan tag tombol. Jika Anda tidak menggunakannya, Anda kehilangan beberapa fitur aksesibilitas yang akan Anda dapatkan secara otomatis dengan tag tombol. Saya akan mengatakan tag tombol sebenarnya direkomendasikan untuk elemen yang bertindak sebagai tombol.

— CookieMonster

menurut catatan dalam bahan referensi yang Anda tautkan: "Sementara elemen <input> dari tombol ketik masih HTML yang benar-benar valid, elemen <button> yang lebih baru sekarang merupakan cara yang disukai untuk membuat tombol." Jadi justru sebaliknya yang Anda nyatakan.

— jedzej

1

Untuk alasan aksesibilitas, saya tidak dapat melakukannya dengan beberapa type=submittombol. Satu-satunya cara untuk bekerja secara native dengan formbeberapa tombol tetapi HANYA satu dapat mengirimkan formulir ketika menekan Entertombol adalah untuk memastikan bahwa hanya satu dari mereka yang ada type=submitsementara yang lain dalam jenis lain seperti type=button. Dengan cara ini, Anda bisa mendapatkan keuntungan dari pengalaman pengguna yang lebih baik dalam berurusan dengan formulir di browser dalam hal dukungan keyboard.

— motss
sumber

0

Pilihan lain yang berhasil bagi saya adalah menambahkan onsubmit = "return false;" ke tag formulir.

<form onsubmit="return false;">

Semantik mungkin bukan solusi yang baik seperti metode di atas untuk mengubah jenis tombol, tetapi tampaknya menjadi pilihan jika Anda hanya menginginkan elemen bentuk yang tidak akan dikirimkan.

— kk64738
sumber