Foros del Web » Programando para Internet » Javascript »

llamar a función ajax al presionar tecla enter

Estas en el tema de llamar a función ajax al presionar tecla enter en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/01/2021, 17:30
 
Fecha de Ingreso: junio-2008
Ubicación: Osorno
Mensajes: 155
Antigüedad: 13 años
Puntos: 3
Pregunta llamar a función ajax al presionar tecla enter

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 Javascript:
Ver original
  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. }
Este es mi código de mi text y mi botón
Código HTML:
Ver original
  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>
  #2 (permalink)  
Antiguo 05/01/2021, 21:12
 
Fecha de Ingreso: abril-2011
Mensajes: 150
Antigüedad: 10 años, 2 meses
Puntos: 56
Respuesta: llamar a función ajax al presionar tecla enter

Añade lo siguiente a tu input:

Código HTML:
<input onkeypress="if(event.keyCode == 13){temporal('{{ route('guiaingresos.insert') }}');event.preventDefault()}" type="text" name="Txt_serie" id='Txt_serie' placeholder="0"  class="form-control"> 
Con if(event.keyCode == 13) compruebas si la tecla pulsada es enter (código ASCII 13). En ese caso llamas a la función que realiza la petición AJAX con la URL que tienes configurada en tu framework.

Con event.preventDefault() cancelas la acción por defecto de hacer click al botón enter (que generalmente es enviar el formulario html, pero en este caso no nos interesa porque lo estás manejando por JS).




La zona horaria es GMT -6. Ahora son las 02:09.