Soumettre un formulaire sur "Enter" avec jQuery?

en plus de rendre false comme Jason Cohen l'a mentionné. Vous devrez peut-être aussi prévenir les erreurs

e.preventDefault();

Je ne sais pas si cela aidera, mais vous pouvez essayer de simuler un clic de bouton Soumettre, au lieu de soumettre directement le formulaire. J'ai le code suivant en production, et ça marche très bien:

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

Note: jQuery ('#submit').focus () fait animer le bouton quand enter est pressé.

Retour false pour empêcher la frappe de continuer.

y a-t-il une raison pour laquelle vous devez faire un crochet et un test pour la touche Entrée?

vous ne pouvez pas simplement ajouter un

<input type="submit" /> 

à votre formulaire et a-t-il naturellement été soumis lorsque l'entrée est poussée? Vous pouvez même alors accrocher l'action onsubmit du formulaire et appeler une fonction de validation de là si vous le souhaitez...

Vous pourriez même utiliser le onsubmit comme un test pour voir si votre formulaire est soumis, mais il ne fonctionne pas si vous appelez form.submit() .

Voici une façon de faire ceci comme un plugin JQuery (au cas où vous voulez réutiliser la fonctionnalité):

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

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

Maintenant, si vous voulez décorer un avec ce type de fonctionnalité, il est aussi simple que cela:

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

vous pouvez aussi simplement ajouter onsubmit="return false" au code du formulaire dans la page pour éviter le comportement par défaut.

puis hook ( .bind ou .live ) l'événement submit du formulaire à n'importe quelle fonction avec jQuery dans le fichier javascript.

voici un exemple de code pour aider:

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

cela fonctionne à partir de 2011-04-13, avec Firefox 4.0 et jQuery 1.4.3

aussi pour maintenir l'accessibilité, vous devriez utiliser ceci pour déterminer votre code:

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

if (c == 13) ...

C'est mon code:

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

ajoute juste pour une mise en œuvre facile. Vous pouvez tout simplement faire un formulaire et ensuite faire le bouton soumettre caché:

par exemple:

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

j'utilise maintenant

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

au début j'ai ajouté un eventhandler au bouton Soumettre qui a produit une erreur pour moi.

en HTML codes:

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

dans les codes 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
        }
    });
}

j'ai découvert aujourd'hui que l'événement keypress n'est pas déclenché lorsque vous appuyez sur la touche Entrée, donc vous pouvez passer à keydown() ou keyup() à la place.

mon script de test:

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

la sortie dans la console en tapant "a Enter B" sur le clavier:

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

keydown (13)
enter
keyup (13)
enter

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

vous voyez dans la deuxième séquence que le 'keypress' est manquant, mais le keydown et le code de registre '13' sont pressés/libérés. Selon jQuery documentation sur la fonction 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.

testé sur IE11 et FF61 sur le serveur 2012 R2

essayez ceci:

var form = document.formname;

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