Mengirimkan formulir di 'Enter' dengan jQuery?

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?

$('.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().

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

e.preventDefault();

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.

Kembali falseuntuk mencegah keystroke dari melanjutkan.

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().

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
    } );

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

Ini kode saya:

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

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

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

if (c == 13) ...

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>

Saya gunakan sekarang

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

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

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

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
        }
    });
}

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();
        }
    })
}