Mengirimkan formulir di 'Enter' dengan jQuery?


427

Saya memiliki formulir login standar rawa - bidang teks email, bidang kata sandi, dan tombol kirim pada proyek AIR yang menggunakan HTML / jQuery. Ketika saya menekan Enter pada formulir, seluruh isi formulir lenyap, tetapi formulir itu tidak dikirimkan. Adakah yang tahu apakah ini masalah Webkit (Adobe AIR menggunakan WebKit untuk HTML), atau jika saya gagal?

Saya mencoba:

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
  }
});

Tapi itu tidak menghentikan perilaku kliring, atau menyerahkan formulir. Tidak ada tindakan yang terkait dengan formulir - mungkinkah itu masalahnya? Bisakah saya menempatkan fungsi javascript dalam aksi?


3
Apakah Anda benar-benar memiliki atribut class = "input" pada <input ... Anda? Sepertinya itu harus $ ('input') penekanan tombol ...
NexusRex

Kelas-kelas dihasilkan secara programatik oleh CMS. Akan tetapi, selain itu, menetapkan nilai $ ('input') akan memengaruhi setiap input pada halaman, terlepas dari apakah saya menginginkan perilaku tersebut atau tidak. Maaf itu menyinggung perasaan Anda.
be hollenbeck

15
Kepekaan tidak tersinggung sedikit pun. Hanya berpikir itu mungkin merupakan pengawasan yang mengarah pada masalah. Lanjutkan.
NexusRex

1
FYI: Jawaban Anda yang diterima tidak sepenuhnya akurat. Lihat jawaban saya di bawah ini.
NoBrainer

Jawaban:


399
$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
    return false;    //<---- Add this line
  }
});

Lihat jawaban stackoverflow ini: event.preventDefault () vs. return false

Pada dasarnya, "return false" sama dengan memanggil e.preventDefaultdan e.stopPropagation().


3
Perhatikan mereka tidak sama. IE8 tidak memiliki e.preventDefault. Untuk IE8 gunakan event.returnValue = false;
mbokil

8
@ MBokil Kecuali ketika menggunakan jQuery, itu sama di IE8. dan IE7. Dan IE6.
Kevin B

Jika Anda ingin mengetikkan lebih dulu ke kolom input, tulis "return false;" di dalam pernyataan if.
Juni Brosas

173

Selain mengembalikan false seperti yang disebutkan Jason Cohen. Anda mungkin juga harus mencegah Kerusakan

e.preventDefault();

13
seperti yang dikatakan @NoBrainer, ini salah: return falsedalam acara yang dikelola oleh jQuery secara otomatis hubungi e.preventDefault ()
Riccardo Galli

83

Tidak tahu apakah itu akan membantu, tetapi Anda dapat mencoba mensimulasikan klik tombol kirim, daripada langsung mengirimkan formulir. Saya memiliki kode berikut dalam produksi, dan berfungsi dengan baik:

    $('.input').keypress(function(e) {
        if(e.which == 13) {
            jQuery(this).blur();
            jQuery('#submit').focus().click();
        }
    });

Catatan: jQuery ('# submit'). Focus () membuat tombol bernyawa ketika masuk ditekan.


2
Bekerja dengan baik tetapi saya harus menambahkan "return false;" untuk mencegah pengiriman formulir ganda.
code90

Bekerja | Lihat BANYAK hasil seperti ini yang berbicara tentang trigger, sendkey, dll, doh, blah ..., tapi itu satu-satunya yang berfungsi untuk saya dan benar-benar mengirim klik pada tombol. Tidak mengirimkan (). Jadi, triknya adalah fokus () .klik () berfungsi dengan aman. TERIMA KASIH.
m3nda

Berhasil, tetapi saya harus meletakkan kode ini di bawah: $ (dokumen) .ready (function () {...
shasi kanth


30

Apakah ada alasan Anda harus mengait dan menguji untuk tombol enter?

Tidak bisakah Anda menambahkan

<input type="submit" /> 

ke formulir Anda dan sudahkah itu disampaikan secara alami ketika masuk didorong? Anda bahkan dapat mengaitkan tindakan formulir onsubmitdan memanggil fungsi validasi dari sana jika Anda ingin ...

Anda bahkan dapat menggunakan onsubmitsebagai tes untuk melihat apakah formulir Anda dikirimkan, tetapi itu tidak akan berfungsi jika Anda menelepon form.submit().


1
Setuju. Preferensi saya akan selalu menggunakan fungsionalitas asli peramban (input type = kirim secara native menanggapi tombol enter) daripada menambahkan skrip yang ditambahkan lebih lanjut ..
Aaron

1
Masalahnya adalah, bagaimana jika Anda melakukan hal-hal ajax dan tidak ada postback sebenarnya ke server, tetapi Anda ingin UI berperilaku seperti yang diharapkan pengguna?
devlord

Memang ... saya telah mengabaikan return false;semuanya.
devlord

14

Berikut cara untuk melakukan ini sebagai plugin JQuery (jika Anda ingin menggunakan kembali fungsionalitasnya):

$.fn.onEnterKey =
    function( closure ) {
        $(this).keypress(
            function( event ) {
                var code = event.keyCode ? event.keyCode : event.which;

                if (code == 13) {
                    closure();
                    return false;
                }
            } );
    }

Sekarang jika Anda ingin menghias <input>elemen dengan jenis fungsi ini sesederhana ini:

$('#your-input-id').onEnterKey(
    function() {
        // Do stuff here
    } );

12

Anda juga bisa menambahkan onsubmit="return false"kode formulir di halaman untuk mencegah perilaku default.

Kemudian kaitkan ( .bindatau .live) acara formulir submitke fungsi apa pun dengan jQuery di file javascript.

Berikut ini contoh kode untuk membantu:

HTML

<form id="search_form" onsubmit="return false">
   <input type="text" id="search_field"/>
   <input type="button" id="search_btn" value="SEARCH"/>
</form>

Javascript + jQuery

$(document).ready(function() {

    $('#search_form').live("submit", function() {
        any_function()
    });
});

Ini bekerja pada 2011-04-13, dengan Firefox 4.0 dan jQuery 1.4.3


Itu tidak berfungsi di Chrome. Akan tetap mengirimkan.
Marcelo Agimóvel

5

Ini kode saya:

  $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });

4

Juga untuk menjaga aksesibilitas, Anda harus menggunakan ini untuk menentukan kode kunci Anda:

c = e.which ? e.which : e.keyCode;

if (c == 13) ...

3

Hanya menambahkan untuk implementasi yang mudah. Anda cukup membuat formulir lalu menyembunyikan tombol kirim:

Sebagai contoh:

<form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>

@cebirci dan versi apa chrome Anda? Saya diuji dari laptop ke pc dan kode saya hanya berfungsi. Coba unduh chrome terbaru sebelum Anda menandai jawabannya.
Joem Maranan

2

Saya gunakan sekarang

$("form").submit(function(event){
...
}

Pada awalnya saya menambahkan eventhandler ke tombol kirim yang menghasilkan kesalahan bagi saya.


1

Saya tahu hari ini acara penekanan tombol tidak dipecat ketika menekan tombol Enter, jadi Anda mungkin ingin beralih ke keydown () atau keyup () sebagai gantinya.

Skrip pengujian saya:

        $('.module input').keydown(function (e) {
            var keyCode = e.which;
            console.log("keydown ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keyup(function (e) {
            var keyCode = e.which;
            console.log("keyup ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keypress(function (e) {
            var keyCode = e.which;
            console.log("keypress ("+keyCode+")");
            if (keyCode == 13) {
                console.log("Enter");
                return false;
            }
        });

Output di konsol saat mengetik "A Enter B" pada keyboard:

keydown (65)
keypress (97)
keyup (65)

keydown (13)
enter
keyup (13)
enter

keydown (66)
keypress (98)
keyup (66)

Anda melihat dalam urutan kedua 'penekanan tombol' hilang, tetapi keydown dan kode register keyup '13' ditekan / dirilis. Sesuai dokumentasi jQuery pada fungsi keypress () :

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

Diuji pada IE11 dan FF61 pada Server 2012 R2


0

Dalam kode HTML:

<form action="POST" onsubmit="ajax_submit();return false;">
    <b>First Name:</b> <input type="text" name="firstname" id="firstname">
    <br>
    <b>Last Name:</b> <input type="text" name="lastname" id="lastname">
    <br>
    <input type="submit" name="send" onclick="ajax_submit();">
</form>

Dalam kode Js:

function ajax_submit()
{
    $.ajax({
        url: "submit.php",
        type: "POST",
        data: {
            firstname: $("#firstname").val(),
            lastname: $("#lastname").val()
        },
        dataType: "JSON",
        success: function (jsonStr) {
            // another codes when result is success
        }
    });
}

1
Tolong jangan posting jawaban yang identik untuk beberapa pertanyaan. Posting satu jawaban yang bagus, lalu pilih / panji untuk menutup pertanyaan lain sebagai duplikat. Jika pertanyaan itu bukan duplikat, sesuaikan jawaban Anda untuk pertanyaan itu.
Paul Roub

@ PaulRoub jawaban saya ada bedanya dengan yang lain.
mghhgm

Bagaimana jawaban ini berbeda dari ini atau ini ?
Paul Roub

@ PaulRoub Saya memiliki masalah ini dan pertama mencari google untuk ini. Halaman itu, membicarakan masalah ini tetapi tidak sederhana. Ketika saya menemukan jawaban terbaik, saya memutuskan untuk membagikan ini pada halaman itu yang dibicarakan untuk membantu pengguna saat mencari ini, lihat jawaban saya pada beberapa halaman stackoverflow yang serupa.
mghhgm

1
jawaban ini sama sekali tidak berhubungan dengan pertanyaan
Zoltán Süle

-4

Coba ini:

var form = document.formname;

if($(form).length > 0)
{
    $(form).keypress(function (e){
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) 
        {
             formsubmit();
        }
    })
}

9
Ini mencampur jquery dengan javascript vanilla dengan cara yang tidak nyaman, dan termasuk pemain yang benar-benar aneh yang hanya membingungkan hal
moopet
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.