Przesyłanie formularza na "Enter" z jQuery?

Oprócz return false, jak wspomniał Jason Cohen. Może być również konieczne preventDefault

e.preventDefault();

Nie wiem, czy to pomoże, ale możesz spróbować symulować kliknięcie przycisku Wyślij, zamiast bezpośrednio wysyłać formularz. Mam następujący kod w produkcji i działa dobrze:

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

Uwaga: jQuery ('#submit').focus () powoduje animację przycisku po naciśnięciu klawisza enter.

Return false aby zapobiec kontynuowaniu naciśnięcia klawisza.

Czy jest jakiś powód, dla którego musisz podłączyć i przetestować klawisz enter?

Nie możesz po prostu dodać

<input type="submit" /> 

Do twojego formularza i czy naturalnie zostanie on przesłany po wciśnięciu enter? Możesz nawet wtedy zaczepić akcję formularza onsubmit i wywołać funkcję walidacji stamtąd, jeśli chcesz...

Możesz nawet użyć onsubmit jako testu, aby sprawdzić, czy twój formularz jest przesyłany, ale nie zadziała, jeśli zadzwonisz form.submit().

Oto sposób, aby to zrobić jako wtyczka JQuery (w przypadku, gdy chcesz ponownie użyć funkcjonalności):

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

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

Teraz, jeśli chcesz ozdobić <input> element z tego typu funkcjonalnością, jest to tak proste jak to:

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

Możesz również po prostu dodać onsubmit="return false" do kodu formularza na stronie, aby zapobiec domyślnemu zachowaniu.

Następnie hook (.bind lub .live) zdarzenia formularza submit do dowolnej funkcji z jQuery w pliku javascript.

Oto przykładowy kod do pomocy:

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

To działa od 2011-04-13, z Firefoksem 4.0 i jQuery 1.4.3

To jest mój kod:

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

Aby zachować dostępność, należy użyć tego do określenia kodu klucza:

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

if (c == 13) ...

Po prostu dodawanie dla łatwej implementacji. Możesz po prostu utworzyć formularz, a następnie ukryć przycisk submit:

Na przykład:

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

Używam teraz

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

Na początku dodałem eventhandler do przycisku submit, co spowodowało dla mnie błąd.

Dowiedziałem się dzisiaj, że zdarzenie keypress nie jest wywoływane po naciśnięciu klawisza Enter, więc możesz zamiast tego przełączyć się na keydown() lub keyup ().

Mój testowy skrypt:

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

Wyjście w konsoli podczas wpisywania "a Enter B"na klawiaturze:

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

keydown (13)
enter
keyup (13)
enter

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

W drugiej sekwencji brakuje 'klawiatury', ale KeyDown i keyup rejestrują kod ' 13 ' jako wciśnięty/zwolniony. Zgodnie z dokumentacją jQuery na klawiaturze funkcyjnej():

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.

Testowane na IE11 i FF61 na serwerze 2012 R2

W kodzie 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>

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

Spróbuj tego:

var form = document.formname;

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