¿Enviar un formulario en 'Entrar' con jQuery?

442

Tengo un formulario de inicio de sesión estándar de pantano: un campo de texto de correo electrónico, un campo de contraseña y un botón de envío en un proyecto de AIR que usa HTML / jQuery. Cuando presiono Enter en el formulario, todo el contenido del formulario desaparece, pero el formulario no se envía. ¿Alguien sabe si esto es un problema de Webkit (Adobe AIR usa Webkit para HTML), o si he estropeado las cosas?

Lo intenté:

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

Pero eso ni detuvo el comportamiento de compensación ni envió el formulario. No hay ninguna acción asociada con el formulario, ¿podría ser ese el problema? ¿Puedo poner una función de JavaScript en la acción?

4
  • 3
    ¿Realmente tiene un atributo class = "input" en su <input ...? Parece que debería ser $ ('input'). Keypress ... 10 de enero de 2012 a las 3:57
  • Las clases son generadas programáticamente por un CMS. Aparte de eso, sin embargo, ajustarlo a $ ('input') afectaría cada entrada en la página, independientemente de si quería el comportamiento o no. Lo siento, ofende tu sensibilidad. 16/02/12 a las 15:42
  • 15
    Sensibilidades no ofendidas en lo más mínimo. Solo pensé que podría haber sido un descuido lo que condujo al problema. Seguir adelante. 22/02/12 a las 8:15
  • 1
    FYI: Su respuesta aceptada no es del todo precisa. Consulte mi respuesta a continuación. 24/09/12 a las 16:17
421
$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
    return false;    //<---- Add this line
  }
});

Echa un vistazo a esta respuesta de stackoverflow: event.preventDefault () vs. return false

Básicamente, "return false" es lo mismo que llamar e.preventDefaulty e.stopPropagation().

3
  • 3
    Tenga en cuenta que no son lo mismo. IE8 no tiene e.preventDefault. Para IE8 use event.returnValue = false;
    mbokil
    27 de julio de 2013 a las 1:57
  • 8
    @mbokil Excepto que cuando se usa jQuery, es lo mismo en IE8. e IE7. Y IE6.
    Kevin B
    25 de julio de 2014 a las 17:45
  • Si desea escribir primero en los campos de entrada, coloque el "retorno falso"; dentro de la declaración if. 16/10/15 a las 14:40
174

Además de devolver falso como mencionó Jason Cohen. Es posible que también tenga que prevenir

e.preventDefault();
1
  • 14
    como dijo @NoBrainer, esto está mal: return falseen un evento administrado por jQuery, llame automáticamente a e.preventDefault () 5 abr 13 a las 12:49
83

No sé si ayudará, pero puede intentar simular un clic en el botón Enviar, en lugar de enviar el formulario directamente. Tengo el siguiente código en producción y funciona bien:

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

Nota: jQuery ('# submit'). Focus () hace que el botón se anime cuando se presiona enter.

3
  • 2
    Funciona muy bien, pero tuve que agregar "devolver falso"; para evitar el envío de doble formulario.
    code90
    4 de agosto de 2013 a las 23:26
  • Trabajando | Veo MUCHOS resultados como este hablando de disparador, sendkey, etc., doh, blah ..., pero eso es lo único que funciona para mí y realmente envía un clic en un botón. No enviar (). Entonces, el truco consistía en funciones focus (). Click () en secuencia. GRACIAS.
    m3nda
    16 de diciembre de 2014 a las 1:58
  • Funciona, pero tuve que poner este código en: $ (documento). Listo (función () {... 22 de agosto de 2017 a las 8:56
61

Regrese falsepara evitar que continúe la pulsación de tecla.

30

¿Hay alguna razón por la que tenga que conectar y probar la tecla Intro?

¿No podrías simplemente agregar un

<input type="submit" /> 

a su formulario y, naturalmente, se enviará cuando se presione Intro? Incluso podría enganchar la onsubmitacción del formulario y llamar a una función de validación desde allí si lo desea ...

Incluso podría usar el onsubmitcomo prueba para ver si se está enviando su formulario, pero no funcionará si llama form.submit().

3
  • 1
    Totalmente de acuerdo. Mi preferencia siempre sería utilizar la funcionalidad nativa del navegador (las entradas de tipo = enviar responden de forma nativa a la pulsación de una tecla enter) en lugar de añadir más scripts modificados.
    Aaron
    17/01/11 a las 23:10
  • 1
    El problema es, ¿qué pasa si estás haciendo cosas ajax y no hay una devolución de datos real en el servidor, pero quieres que la interfaz de usuario se comporte como espera el usuario?
    devlord
    25/10/12 a las 20:46
  • De hecho ... lo había pasado por alto todo return false;.
    devlord
    29/10/12 a las 5:49
15

Aquí hay una forma de hacer esto como un complemento de JQuery (en caso de que desee reutilizar la funcionalidad):

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

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

Ahora bien, si quieres decorar un <input>elemento con este tipo de funcionalidad es tan sencillo como esto:

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

También puede simplemente agregar onsubmit="return false"al código del formulario en la página para evitar el comportamiento predeterminado.

Luego, enganche ( .bindo .live) el submitevento del formulario a cualquier función con jQuery en el archivo javascript.

Aquí hay un código de muestra para ayudar:

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

Esto funciona a partir del 13 de abril de 2011, con Firefox 4.0 y jQuery 1.4.3

0
5

Este es mi codigo:

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

Además, para mantener la accesibilidad, debe usar esto para determinar su código clave:

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

if (c == 13) ...
0
3

Simplemente agregando para una fácil implementación. Simplemente puede crear un formulario y luego ocultar el botón de envío:

Por ejemplo:

<form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>
1
  • @cebirci y ¿qué versión es tu Chrome? Probé desde computadoras portátiles a PC y mi código simplemente funciona. Intente descargar el Chrome más nuevo antes de marcarlo en mi respuesta. 7 de noviembre de 2013 a las 8:55
3

Yo uso ahora

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

Al principio agregué un manejador de eventos al botón de enviar que me produjo un error.

2

Hoy descubrí que el evento de pulsación de tecla no se activa al presionar la tecla Enter, por lo que es posible que desee cambiar a keydown () o keyup () en su lugar.

Mi guión de prueba:

        $('.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 salida en la consola al escribir "A Enter B" en el teclado:

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

keydown (13)
enter
keyup (13)
enter

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

Verá en la segunda secuencia que falta la 'pulsación de tecla', pero el código de registro de pulsación y subida de teclas '13' se ha pulsado / liberado. Según la documentación de jQuery sobre la función 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.

Probado en IE11 y FF61 en Server 2012 R2

1
  • Acabo de probarlo en Chrome 90, Edge 90 y FF88. ¡Gracias! 24 de mayo a las 15:45
1

Como puede ser tarde, puede agregar la siguiente línea en html: -

<input onkeyup="submitForm(event)" oninput="addTextName(this)" type="text" id="name-val">

y agregue esto en el archivo js

function submitForm(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 13){
    toggleNextScreen();
}

}

código clave 13 significa entrar

0

En códigos 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>

En códigos 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
        }
    });
}
5
  • 1
    No publique respuestas idénticas a varias preguntas. Publique una buena respuesta, luego vote / marque para cerrar las otras preguntas como duplicadas. Si la pregunta no es un duplicado, adapte sus respuestas a la pregunta. 29 de septiembre de 2017 a las 13:59
  • @PaulRoub mi respuesta tiene alguna diferencia con otra.
    mghhgm
    29 de septiembre de 2017 a las 14:01
  • ¿En qué se diferencia esta respuesta de esto o esto ? 29 de septiembre de 2017 a las 14:03
  • @PaulRoub Tengo este problema y primero busco en Google. En esas páginas, se habla de este problema pero no es sencillo. Cuando encuentro la mejor respuesta, decidí compartir esto en las páginas de las que se habla para ayudar a los usuarios cuando busquen esto, vea mi respuesta en algunas páginas similares de stackoverflow.
    mghhgm
    29 de septiembre de 2017 a las 14:09
  • 1
    esta respuesta no está relacionada con la pregunta en absoluto 22/11/18 a las 9:52
-4

Prueba esto:

var form = document.formname;

if($(form).length > 0)
{
    $(form).keypress(function (e){
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) 
        {
             formsubmit();
        }
    })
}
1
  • 9
    Esto es mezclar jquery con javascript vainilla de una manera incómoda, e incluye un elenco realmente extraño que confunde las cosas
    moopet
    20/09/12 a las 18:39