formulir tanpa tindakan dan di mana enter tidak memuat ulang halaman

94

Saya mencari cara paling rapi untuk membuat formulir HTML yang tidak memiliki tombol kirim. Itu sendiri cukup mudah, tetapi saya juga harus menghentikan formulir dari memuat ulang dirinya sendiri saat hal-hal seperti pengiriman selesai (misalnya, menekan Enterdi bidang teks).

javascript html forms Matt Roberts
sumber
Apakah Anda ingin tidak pernah mengirimkan?
UpTheCreek
Jika Anda hanya memiliki <form> dengan satu <input> yang merupakan bidang teks yang tidak boleh dikirim saat Anda menekan enter, bukan?
Zack The Human
Saya ingin itu tunduk pada beberapa kondisi lain (sebenarnya menekan tombol tertentu). Masalahnya adalah saya tidak bisa mendapatkan perilaku 'masukkan saat berada dalam bidang teks' dari pengeposan / membuka url yang sama agar tidak terjadi. Jadi formulir yang saya buat dengan hati-hati, di mana Anda perlu melakukan X, Y dan Z untuk mengirimkannya dapat dikirimkan secara keliru oleh pengguna menekan enter.
Matt Roberts

Jawaban:

44

Tambahkan penangan onsubmit ke formulir (baik melalui plain js atau jquery $ (). Submit (fn)), dan kembalikan false kecuali kondisi spesifik Anda terpenuhi.

Kecuali jika Anda tidak ingin formulir dikirim, selamanya - dalam hal ini, mengapa tidak membiarkan atribut 'action' pada elemen formulir saja?

K Prime
sumber
151
Formulir tanpa actionatribut bukanlah formulir, menurut standar - dan sebenarnya akan menyebabkan halaman dimuat ulang di beberapa browser .. Menurut saya, formulir itu action="javascript:void(0);"berfungsi dengan baik.
Dutchie432
Jawaban Dutchies bekerja dengan sempurna. Firefox baru saja menyegarkan halaman.
IAmGroot
1
@ Dutchie432 harus menjadikan ini sebagai jawaban, bukan komentar. Kemudian ia akan menuju ke puncak tempatnya. Atau, KPrime dapat menyesuaikan jawabannya, karena menghilangkan tindakan tersebut tidak berhasil untuk saya ...
sage
211

Anda ingin memasukkan action="javascript:void(0);"ke formulir Anda untuk mencegah halaman dimuat ulang dan mempertahankan standar HTML.

Dutchie432
sumber
4
Baru saja menghabiskan 2 hari mencoba untuk menekan tombol submit tindakan default ketika enter ditekan, karena meskipun tindakan itu terjadi, halaman tersebut akhirnya memuat ulang (Firefox). Menambahkan void javascript sebagai tindakan pada formulir memperbaikinya. Terima kasih untuk itu.
Tony Payne
terima kasih atas jawaban tambahan ini. ini masih berfungsi - tetapi apakah ini masih merupakan solusi "canggih" di tahun 2016?
low_rents
1
@low_rents Saya masih menggunakannya sepanjang waktu dan secara pribadi belum menemukan solusi yang lebih baik.
Dutchie432
1
Terima kasih atas solusi tepat dan hebat untuk menyelesaikan pemuatan ulang halaman sambil menekan tombol enter :) Solusi terbaik.
Imran Rafiq Agak
9

Cukup tambahkan acara ini ke bidang teks Anda. Ini akan mencegah pengiriman saat menekan Enter, dan Anda bebas menambahkan tombol kirim atau formulir panggilan.submit () seperti yang diperlukan:

onKeyPress="if (event.which == 13) return false;"

Sebagai contoh:

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>
GenericMeatUnit
sumber
1
Terima kasih untuk itu. Saya khawatir kejelasan jawaban Anda menjelaskan kepada saya kebenaran dari jawaban sebelumnya sehingga Anda tidak mendapatkan jawaban yang diterima tetapi Anda mendapatkan rasa terima kasih dan upvote saya!
Matt Roberts
2
Terima kasih. Senang untuk membantu. Lagipula aku tidak pernah menjadi pusat perhatian. ;)
GenericMeatUnit
5

Saat Anda menekan enter dalam bentuk, perilaku alami formulir akan dikirimkan, untuk menghentikan perilaku yang tidak wajar ini, Anda harus mencegahnya dari mengirimkan (perilaku default), dengan jquery:

$("#yourFormId").on("submit",function(event){event.preventDefault()})
jsDevia
sumber
4

sebuah ide:

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

dan

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    {
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    }
</script>
tom nobleman
sumber
1

Dua cara untuk mengatasinya:

  1. nilai tindakan formulir adalah "javascript: void (0);".
  2. tambahkan pendengar acara penekanan tombol untuk formulir untuk mencegah pengiriman.
tagihan
sumber
Mendengarkan acara penekanan tombol (misalnya tombol enter) dapat membuat Anda bermasalah dengan textareas, dan mungkin memilih pelengkapan otomatis atau dropdown, dan seluler dapat menjadi sumber masalah lain.
luckydonald
0

Tanggapan pertama adalah solusi terbaik:

Tambahkan penangan onsubmit ke formulir (baik melalui plain js atau jquery $ (). Submit (fn)), dan kembalikan false kecuali kondisi spesifik Anda terpenuhi.

Lebih spesifik dengan jquery:

$('#your-form-id').submit(function(){return false;});

Kecuali jika Anda tidak ingin formulir dikirim, selamanya - dalam hal ini, mengapa tidak membiarkan atribut 'action' pada elemen formulir saja?

Menulis ekstensi Chrome adalah contoh di mana Anda mungkin memiliki formulir untuk input pengguna, tetapi Anda tidak ingin mengirimkannya. Jika Anda menggunakan action = "javascript: void (0);", kode mungkin akan berfungsi tetapi Anda akan berakhir dengan masalah ini di mana Anda mendapatkan kesalahan tentang menjalankan Javascript sebaris.

Jika Anda mengabaikan tindakan sepenuhnya, formulir akan dimuat ulang yang juga tidak diinginkan dalam beberapa kasus saat menulis ekstensi Chrome. Atau jika Anda memiliki halaman web dengan semacam kalkulator tertanam, di mana pengguna akan memberikan beberapa masukan dan mengklik "Hitung" atau semacamnya.

skelliam.dll
sumber