2012-01-24 19 views
95

Duplicar posible:
HTML: Submitting a form by pressing enter without a submit button¿Presentar formulario con la tecla Entrar sin enviar el botón?

¿Cómo puedo enviar un formulario con sólo la tecla Intro en un campo de entrada de texto, sin tener que añadir un botón de envío?

Recuerdo que esto funcionó en el pasado, pero lo probé ahora y el formulario no se envía a menos que haya un campo de entrada de tipo de envío dentro.

+0

Pregunta muy útil, gracias) –

Respuesta

189
$("input").keypress(function(event) { 
    if (event.which == 13) { 
     event.preventDefault(); 
     $("form").submit(); 
    } 
}); 
+2

¡No olvide agregar el # delante del ID de entrada! – MadsterMaddness

+8

@MadsterMaddness Use '' '' solo si estamos especificando el ID de un elemento. A partir de esa respuesta, especifica TODOS los elementos ''. – Mai

44

Cambio #form de identificación de su forma

$('#form input').keydown(function(e) { 
    if (e.keyCode == 13) { 
     $('#form').submit(); 
    } 
}); 

O, alternativamente

$('input').keydown(function(e) { 
    if (e.keyCode == 13) { 
     $(this).closest('form').submit(); 
    } 
}); 
+8

Puede vincular el evento de selección en el formulario, en lugar de vincular las entradas individuales: el evento de selección se propagará hasta el formulario. – Beejamin

+0

muy útil de hecho! tiene sentido no tener enviar botones de formulario en todas partes – cwiggo

+2

Si su formulario tiene múltiples elementos de entrada, entonces un poco mejor sería vincular el controlador a la forma y filtrar los eventos de elementos de entrada como este: $ ('# form'). on (' keydown ',' input ', function (e) {... –

14

respuesta de Jay Gilford va a funcionar, pero creo que realmente la manera más fácil es simplemente una palmada a un display: none; en un botón de enviar en el formulario.

+4

Esto no funciona para mí, tengo que establecer la visibilidad: oculta; en su lugar. –

5

@ La respuesta de JayGuilford es buena, pero si no quiere una dependencia JS, puede usar un elemento enviar y simplemente ocultarlo usando display: none;.

Cuestiones relacionadas