1

bueno en estos momentos estoy que hago un pequeño sistema donde al escribir una palabra en un input text, automaticamente me muestra las filas de una tabla. Ahora aqui esta mi problema...y si yo quiero escribir en 2, 3 a mas input y que cargue automaticamente...no me sale, solo me captura el primer input. Este es mi codigo:

<input class="form-control" type="text" name="" id="apellido1">
<input class="form-control" type="text" name="" id="apellido2">
<input class="form-control" type="text" name="" id="nombre">

<div id="cargar_tabla"></div>

<script type="text/javascript">
 $(document).ready(function() {
      $('#apellido1').on('keypress', function(){
          var apellido1=$(this).val();
          var apellido2=$('#apellido2').val();
          var nombre=$('#nombre').val();

          $.ajax({
          url: "/Familias/Personas/Tabla",
          type: "post",
          dataType: "json",
          data: {_token: "{{ csrf_token() }}", text: apellido1, text2: apellido2, text3: nombre },
          success: function (response) {
                $("#cargar_tabla").html(response);
          }
        });

      });
  });
</script>

Las 2 siguientes variables, si los pongo dentro o fuera de la funcion del primer input igual no sale, ayuda :s

1 respuesta 1

1

Solo funciona con el primer input porque esta usando el id del primer input para escuchar el keypress. Necesitas crear una clase y escuchar en esa clase. Algo asi:

<input class="form-control nombre" type="text" name="" id="apellido1">
<input class="form-control nombre" type="text" name="" id="apellido2">
<input class="form-control nombre" type="text" name="" id="nombre">

<div id="cargar_tabla"></div>

<script type="text/javascript">
 $(document).ready(function() {
      $('.nombre').on('keypress', function(){
          var apellido1=$('#apellido1').val();
          var apellido2=$('#apellido2').val();
          var nombre=$('#nombre').val();

          $.ajax({
          url: "/Familias/Personas/Tabla",
          type: "post",
          dataType: "json",
          data: {_token: "{{ csrf_token() }}", text: apellido1, text2: apellido2, text3: nombre },
          success: function (response) {
                $("#cargar_tabla").html(response);
          }
        });

      });
  });
</script>
3
  • 1
    Gracias amigo! Me sirvio!, no sabia muy bien eso del keypress pero con ese dato ya me salio!
    – Jrse
    Commented el 27 feb. 2019 a las 15:50
  • Algo redundante la clase, ya que con la de form-control se puede lograr el mismo objetivo Commented el 27 feb. 2019 a las 15:53
  • 1
    Normalmente, form-control se usa para formatear todo tipo de elementos en formas. Si OP tiene otros inputs con esa clase podria generar resultados no deseados. Yo pienso que es mejor crear una clase especifica que se dedique unicamente al objetivo deseado.
    – alanfcm
    Commented el 27 feb. 2019 a las 15:57

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.