javascript - create - jquery submit form ajax

Ingrese el botón de disparadores, haga clic

Question

Tengo una página con dos botones. Uno es un elemento <button> y el otro es un <input type="submit"> . Los botones aparecen en la página en ese orden. Si estoy en un campo de texto en cualquier lugar del formulario y presiono <Enter> , se activa el evento de click del elemento del click . Supongo que es porque el elemento de botón se sienta primero.

No puedo encontrar nada que parezca una forma confiable de configurar el botón predeterminado, ni necesariamente quiero hacerlo en este momento. A falta de algo mejor, capturé una tecla en cualquier parte del formulario y, si se presionó la tecla <Enter> , simplemente lo estoy negando:

$(''form'').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

Hasta donde puedo decir hasta ahora, parece estar funcionando, pero se siente increíblemente agresivo. ¿Alguien sabe de una técnica más sofisticada para hacer esto? De manera similar, ¿hay algún escollo en esta solución del que no estoy al tanto?

Gracias.

Answer 1

Agregué un botón de tipo "enviar" como primer elemento del formulario y lo hice invisible ( width:0;height:0;padding:0;margin:0;border-style:none;font-size:0; ). Funciona como una actualización del sitio, es decir, no hago nada cuando se presiona el botón, excepto que el sitio se carga nuevamente. Para mí funciona bien ...

Answer 2

Al presionar ''Enter'' en el <input type="text"> enfocado, se activa el evento ''click'' en el primer elemento posicionado: <button> o <input type="submit"> . Si presiona ''Enter'' en <textarea> , simplemente crea una nueva línea de texto.

Vea el ejemplo here .

Su código impide crear una nueva línea de texto en <textarea> , por lo que debe presionar la tecla presionar solo para <input type="text"> .

Pero ¿por qué necesita presionar Enter en el campo de texto? Si desea enviar un formulario presionando ''Enter'', pero el <button> debe permanecer el primero en el diseño, simplemente juegue con el marcado: coloque el código <input type="submit"> antes del <button> y use CSS para guardar el diseño que necesitas

Capturando ''Enter'' y guardando marcado:

$(''input[type="text"]'').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13)
    e.preventDefault();
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});

Answer 3

Al pulsar Intro en el campo de texto de un formulario, de forma predeterminada, se enviará el formulario. Si no quieres que funcione de esa manera, debes capturar la tecla enter, presionar y consumir como lo has hecho. No hay forma de evitar esto. Funcionará de esta manera incluso si no hay un botón presente en el formulario.

Answer 4

Es importante leer las especificaciones de HTML para comprender realmente qué comportamiento se espera:

La especificación HTML5 establece explícitamente lo que sucede en las implicit submissions :

El botón predeterminado de un elemento de formulario es el primer botón de envío en orden de árbol cuyo propietario de formulario es ese elemento de formulario.

Si el agente de usuario admite permitir que el usuario envíe un formulario implícitamente (por ejemplo, en algunas plataformas presionando la tecla "enter" mientras un campo de texto está enfocado, envía implícitamente el formulario), y luego lo hace para un formulario cuyo botón predeterminado tiene una activación definida el comportamiento debe hacer que el agente de usuario ejecute pasos sintéticos de activación de clics en ese botón predeterminado.

Esto no se hizo explícito en la especificación HTML4, sin embargo, los navegadores ya han implementado lo que se describe en la especificación HTML5 (razón por la cual está incluido explícitamente).

Editar para agregar:

La respuesta más simple que puedo pensar es poner su botón de envío como el primer elemento [type="submit"] en el formulario, agregar relleno al final del formulario con css, y colocar absolutamente el botón de enviar en la parte inferior donde Me gustaría.

Answer 5

Lo haría de la siguiente manera: en el controlador para el evento onclick del botón (no enviar), verifique el código clave del objeto del evento. Si es "enter", devolvería false.

Answer 6

Mi situación tiene dos botones Submit dentro del elemento de formulario: Update y Delete . El botón Delete borra una imagen y el botón Update actualiza la base de datos con los campos de texto en el formulario.

Como el botón Delete estaba primero en el formulario, era el botón predeterminado en la tecla Enter . No es lo que quería. El usuario esperaría poder presionar Enter luego de cambiar algunos campos de texto.

Encontré mi respuesta a la configuración del botón predeterminado here :

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

Sin utilizar ningún script, definí el formulario al que pertenece cada botón usando el atributo <button> form="bla" . Configuré el botón Delete en un formulario que no existe y configuré el botón Update que quería activar en la tecla Enter al formulario en el que estaría el usuario cuando ingrese el texto.

Esto es lo único que me ha funcionado hasta ahora.

Answer 7

No creo que necesites javascript o CSS para arreglar esto.

De acuerdo con la especificación html 5 para botones, un botón sin atributo de tipo se trata igual que un botón con su tipo configurado para "enviar", es decir, como un botón para enviar su formulario de contenido. Establecer el tipo de botón en "botón" debería evitar el comportamiento que estás viendo.

No estoy seguro del soporte de navegador para esto, pero el mismo comportamiento se especificó en la especificación html 4.01 para botones, así que espero que sea bastante bueno.

Answer 8

Puede usar javascript para bloquear el envío de formularios hasta el momento apropiado. Un ejemplo muy crudo:

<form onsubmit=''return false;'' id=''frmNoEnterSubmit'' action="index.html">

    <input type=''text'' name=''txtTest'' />

    <input type=''button'' value=''Submit'' 
        onclick=''document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();'' />

</form>

Al presionar enter aún se activará el formulario para enviar, pero el javascript evitará que se envíe, hasta que presione el botón.

Answer 9

Utilizando

<button type="button">Whatever</button>

debería hacer el truco.

La razón es porque un botón dentro de un formulario tiene su tipo establecido implícitamente para submit . Como dice zzzzBoz, el Spec dice que el primer button o input con type="submit" es lo que se desencadena en esta situación. Si especificas específicamente type="button" , el navegador lo elimina de consideración.