3

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

function temporal(ruta)
{
   const codigobarra=$('#Txt_serie').val();
   const sku_ext=$('#Txt_codigo').val();
   const Idservicio=$('#Txt_servicio').val(); 
   const Numguia=$('#Txt_numguia').val(); 
   const Idmaterial=$('#Txt_idmaterial').val();
   const Idproveedor=$('#Txt_prov').val();
   const Numcantidad=$('#Txt_cant').val();
   const identificador=$('#Txt_identificador').val();
   const Numfila=$('#Txt_fila').val();
   const usuario=$('#Txt_user').val();
   const estado=1;
    
    $.ajax(
        {
            url:ruta, 
            type:'POST',
            data: {
                _token:$('input[name="_token"]').val(),
                temp_mat_id:Idmaterial,
                tem_mst_id:estado,
                temp_ser_id:Idservicio,
                temp_serie:codigobarra,
                temp_guia:Numguia,
                temp_pro_id:Idproveedor,
                temp_identificador:identificador,
                temp_nwa_id:1,
                temp_use_id:usuario
            },
            success:function () {
                           document.getElementById("respuesta").innerHTML=`<div class="alert alert-danger" role="alert">OK</div>`
                  document.getElementById('Txt_serie').value= "";
                  $('#Txt_serie').focus(); 
                }
               
         });
        
         return false;
         
    
}
  {{-- este el text que no logro que me funcione al presionar enter --}}

<input type="text" name="Txt_serie" id='Txt_serie' placeholder="0"  class="form-control">

 {{-- este el tbotón que llama a la función--}}

<button name="Btn_agregar" id="Btn_agregar" type="button" onclick="temporal('{{ route('guiaingresos.insert') }}')"   class="btn btn-info">Agregar</button>

espero me puedan ayudar.

1 respuesta 1

1

function temporal(ruta)
{
   const codigobarra=$('#Txt_serie').val();
   const sku_ext=$('#Txt_codigo').val();
   const Idservicio=$('#Txt_servicio').val(); 
   const Numguia=$('#Txt_numguia').val(); 
   const Idmaterial=$('#Txt_idmaterial').val();
   const Idproveedor=$('#Txt_prov').val();
   const Numcantidad=$('#Txt_cant').val();
   const identificador=$('#Txt_identificador').val();
   const Numfila=$('#Txt_fila').val();
   const usuario=$('#Txt_user').val();
   const estado=1;
    
    document.getElementById("Btn_agregar"),addEventListener("click", ()=>{
       $.ajax(
        {
            url:ruta, 
            type:'POST',
            data: {
                _token:$('input[name="_token"]').val(),
                temp_mat_id:Idmaterial,
                tem_mst_id:estado,
                temp_ser_id:Idservicio,
                temp_serie:codigobarra,
                temp_guia:Numguia,
                temp_pro_id:Idproveedor,
                temp_identificador:identificador,
                temp_nwa_id:1,
                temp_use_id:usuario
            },
            success:function () {
                           document.getElementById("respuesta").innerHTML=`<div class="alert alert-danger" role="alert">OK</div>`
                  document.getElementById('Txt_serie').value= "";
                  $('#Txt_serie').focus(); 
                }
               
         });

     })
        
         return false;
         
    
}
  {{-- este el text que no logro que me funcione al presionar enter --}}

<input type="text" name="Txt_serie" id='Txt_serie' placeholder="0"  class="form-control">

 {{-- este el tbotón que llama a la función--}}

<button name="Btn_agregar" id="Btn_agregar" type="button" onclick="temporal('{{ route('guiaingresos.insert') }}')"   class="btn btn-info">Agregar</button>

simplemente obtienes una refecencia al elemente con el id Btn_agregar y luego escuchas el click y dentro de la funcion agregas la peticon ajax, si quieres que toda la funcion temporal() se ejecute cuando se haga click al boton, entonces haces algo como esto...

document.getElementById("Btn_agregar"),addEventListener("click", temporal())

esta porcion de codigo la agregas fuera de la funcion temporal() entonces cuando hagas click en el boton se ejecutara toda la funcion temporal(), espero que haya entendido bien tu problema y que con esto te pueda ayudar.

para poder ejecutar dicha función mediante un enter, deberías usar un formulario,algo como esto

<form id="submit">
  <input type="text" name="Txt_serie" id='Txt_serie' placeholder="0"  
  class="form-control">

  <button name="Btn_agregar" id="Btn_agregar" type="submit" 
  onclick="temporal('{{ route('guiaingresos.insert') }}')"   class="btn btn- 
  info">Agregar</button>
</form>

y deberias modificar la funcion asi

document.getElementById("submit"),addEventListener("submit", temporal())

de esta forma aprevecharias el uso de enter para poder ejecutar tu funcion temporal()

3
  • Hola @Enzo gracias por responder, el codigo que pusiste es para que se ejecute con el botón, pero no me funciona al presionar la tecla Enter
    – proteus8
    Commented el 5 ene. 2021 a las 23:18
  • ahora lo arreglo
    – Enzo
    Commented el 5 ene. 2021 a las 23:41
  • 1
    Excelente @Enzo !!! muchas gracias
    – proteus8
    Commented el 6 ene. 2021 a las 0:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.