Nonaktifkan formulir kirim otomatis pada klik tombol

180

Saya memiliki formulir HTML di mana saya menggunakan beberapa tombol. Masalahnya adalah bahwa tidak peduli tombol mana yang saya klik, formulir akan dikirimkan bahkan jika tombolnya bukan tipe "kirim". mis. Tombol seperti:, <button>Click to do something</button>menghasilkan pengiriman formulir.

Cukup menyakitkan melakukan e.preventDefault()untuk masing-masing tombol ini.

Saya menggunakan jQuery dan jQuery UI dan situs webnya menggunakan HTML5.

Apakah ada cara untuk menonaktifkan perilaku otomatis ini?

Paris
sumber

Jawaban:

460

Tombol suka <button>Click to do something</button> adalah tombol kirim.

Setel type="button"untuk mengubahnya. type="submit"adalah default (seperti yang ditentukan oleh rekomendasi HTML ).

Quentin
sumber
24
kehilangan tidur sehari dengan sia-sia memperbaiki kode saya karena saya tidak tahu spesifikasi sederhana ini!
palerdot
4
Menggemakan gagasan palerdot, senang saya menemukan catatan ini setelah pencarian Google cepat dan tidak membunuh berjam-jam. Sangat tahu, terima kasih banyak.
brooklynsweb
2
@NiketJoshi - Pernyataan itu sepertinya tidak ada hubungannya dengan pertanyaan jawaban ini. Jika Anda memiliki pertanyaan baru maka tanyakan satu tetapi pastikan Anda memberikan pernyataan masalah yang jelas dan contoh minimal yang dapat direproduksi .
Quentin
19

Anda bisa saja mencoba menggunakan return false (return false menimpa perilaku default pada setiap elemen DOM) seperti itu:

myform.onsubmit = function ()
{ 
  // do what you want
  return false
}

dan kemudian kirimkan formulir Anda menggunakan myform.submit ()

atau sebagai alternatif:

mybutton.onclick = function () 
{
   // do what you want
   return false
}

Juga, jika Anda menggunakan type="button"formulir Anda tidak akan dikirimkan.

Boris D. Teoharov
sumber
8

<button>Sebenarnya mengirimkan tombol, mereka tidak memiliki fungsi utama lainnya. Anda harus mengatur jenis ke tombol.
Tetapi jika Anda mengikat event handler Anda seperti di bawah ini, Anda menargetkan semua tombol dan tidak harus melakukannya secara manual untuk setiap tombol!

$('form button').on("click",function(e){
    e.preventDefault();
});
desain mas
sumber
Ini e.preventDefault();.
hlcs
0

jika Anda ingin menambahkan langsung ke input sebagai atribut, gunakan ini

 onclick="return false;" 

<input id = "btnPlay" type="button" onclick="return false;" value="play" /> 

ini akan mencegah perilaku pengiriman formulir

bh_earth0
sumber
0

yang lainnya:

if(this.checkValidity() == false) {

                $(this).addClass('was-validated');
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();

                return false;
}
Halo Retas
sumber