elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  llamar a función ajax al presionar tecla enter
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: llamar a función ajax al presionar tecla enter  (Leído 5,518 veces)
proteus8

Desconectado Desconectado

Mensajes: 55


Ver Perfil
llamar a función ajax al presionar tecla enter
« en: 5 Enero 2021, 23:55 pm »

Hola a todos!! tengo un problema con una función javascript, resulta que en mi pagina tengo un text y un botón, al presionar el botón se ejecuta la función javascript la que envía datos de un formulario a un controlador de laravel, esto funciona sin problemas , pero necesito que también se ejecute la función si el usuario presiona la tecla enter cuando esta en el text, no se como hacerlo ya que si ahora lo presiono me da un error indicando que envié valores vacíos a la función.

esta es mi función
Código
  1. function temporal(ruta)
  2. {
  3.   const codigobarra=$('#Txt_serie').val();
  4.   const sku_ext=$('#Txt_codigo').val();
  5.   const Idservicio=$('#Txt_servicio').val();
  6.   const Numguia=$('#Txt_numguia').val();
  7.   const Idmaterial=$('#Txt_idmaterial').val();
  8.   const Idproveedor=$('#Txt_prov').val();
  9.   const Numcantidad=$('#Txt_cant').val();
  10.   const identificador=$('#Txt_identificador').val();
  11.   const Numfila=$('#Txt_fila').val();
  12.   const usuario=$('#Txt_user').val();
  13.   const estado=1;
  14.  
  15.    $.ajax(
  16.        {
  17.            url:ruta,
  18.            type:'POST',
  19.            data: {
  20.                _token:$('input[name="_token"]').val(),
  21.                temp_mat_id:Idmaterial,
  22.                tem_mst_id:estado,
  23.                temp_ser_id:Idservicio,
  24.                temp_serie:codigobarra,
  25.                temp_guia:Numguia,
  26.                temp_pro_id:Idproveedor,
  27.                temp_identificador:identificador,
  28.                temp_nwa_id:1,
  29.                temp_use_id:usuario
  30.            },
  31.            success:function () {
  32.                           document.getElementById("respuesta").innerHTML=`<div class="alert alert-danger" role="alert">OK</div>`
  33.                  document.getElementById('Txt_serie').value= "";
  34.                  $('#Txt_serie').focus();
  35.                }
  36.  
  37.         });
  38.  
  39.         return false;
  40.  
  41.  
  42. }
  43.  

Código
  1. {{-- este el text que no logro que me funcione al presionar enter --}}
  2.  
  3. <input type="text" name="Txt_serie" id='Txt_serie' placeholder="0"  class="form-control">
  4.  
  5. {{-- este el tbotón que llama a la función--}}
  6.  
  7. <button name="Btn_agregar" id="Btn_agregar" type="button" onclick="temporal('{{ route('guiaingresos.insert') }}')"   class="btn btn-info">Agregar</button>
  8.  

espero me puedan ayudar.


En línea

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.159



Ver Perfil
Re: llamar a función ajax al presionar tecla enter
« Respuesta #1 en: 6 Enero 2021, 01:07 am »

Hay dos opciones, una es poner el tipo de botón a submit que es el estándar para formularios y reacciona al Enter enviando el formulario, entonces tendrías que quitarle ese evento onclick y pasárselo al evento onsubmit del formulario, ya que cuando una da click en el botón de tipo submit de un formulario o presiona Enter estando dentro de él, automáticamente se ejecuta el evento onsubmit del formulario. Pero para evitar que el formulario "se envíe", se actualice la página y te vacíe los datos, hay que poner un preventDefault() al final de la función:

Código
  1. <form onsubmit="myFunction()">
  2.  Enter name: <input type="text">
  3.  <input type="submit">
  4. </form>
  5.  
  6.  function myFunction() {
  7.    console.log('Hello')
  8.    event.preventDefault()
  9.  }

La otra forma es añadir el evento onkeyup o onkeypress al formulario o body para verificar si se a presionado el Enter y mandar a hacer lo mismo que hacia el onclick del botón. Me parece que había otra forma pero no la recuerdo bien XD


En línea

proteus8

Desconectado Desconectado

Mensajes: 55


Ver Perfil
Re: llamar a función ajax al presionar tecla enter
« Respuesta #2 en: 6 Enero 2021, 01:46 am »

@EdePC  excelente!!! funciono muchas gracias master.  ;-) ;-) ;-)
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Presionar Tecla en VB
Programación Visual Basic
KPOCH 2 5,360 Último mensaje 29 Enero 2006, 03:21 am
por sch3m4
[Resuelto] Como llamar a una función php desde ajax
PHP
yoelrodguez 2 4,183 Último mensaje 12 Mayo 2015, 01:06 am
por yoelrodguez
quiero que mi programa termine al presionar la tecla ENTER // hecho en C++
Programación C/C++
juniorAC 1 9,058 Último mensaje 20 Noviembre 2016, 02:22 am
por Drewermerc
comando se ejecute automaticamente a la hora de presionar la tecla sin enter
Programación C/C++
SilentBolt 2 3,211 Último mensaje 8 Agosto 2017, 04:11 am
por SilentBolt
¿Como llamar una funcion de php con ajax? « 1 2 »
PHP
SrTrp 10 7,543 Último mensaje 2 Septiembre 2017, 17:57 pm
por SrTrp
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines