3

Toma_pedido

Quisiera detectar si el registro de una fila ha sufrido algún cambio en sus valores.

Como ejemplo usare la primera fila para el producto : "HILO DE AGUA - AZUL MARINO" que tiene los siguientes datos;La cantidad es 2, el precio es 4, y el importe es 9.44.

Supongamos que cambie la cantidad a 5, en ese momento se cambia el importe. Es en ese momento donde quiero detectar ese cambio de valores que han sufrido todos los inputs de dicha fila.

Todo esto lo hago para saber que hay un registro que ha sufrido una modificación, y que tiene que pulsarse un botón de "Actualizar" para poder continuar con el siguiente paso.

1
  • ¿Puedes usar AJAX? Esa es la clave hermano, ya vi que tienes jqurery y con eso es fácil usar ajax, mi pregunta es si tu lo implementas? Commented el 27 jun. 2017 a las 7:54

4 respuestas 4

1

Metodo 1. input event

En navegadores modernos, puedes usar el evento de entrada. Este evento se dispara cuando el usuario está escribiendo en un campo de texto, al pegar, deshacer y básicamente en cualquier momento en el que el valor del input cambió de un valor a otro.

$('#table').on('input', ':input', function() { 
   var value = $(this).val(); //obtiene el valor actual del input.
   var name = $(this).prop('name');
    if (value.length > 0){ //si el campo no esta vacio
    console.log(name+": "+value);
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <th>Producto</th>
    <th>Cant</th> 
    <th>U.M</th>
  </tr>
  <tr>
    <td><input name="producto" type="text" value="HILO DE AGUA - AZUL MARINO"></td>
    <td><input name="cantidad" type="number" value="4"></td> 
    <td><input name="unidad" type="text" value="UND"></td>
  </tr>
  <tr>
    <td><input name="producto" type="text" value="ELASTICO PERSONALIZADO E3 2234"></td>
    <td><input name="cantidad" type="number" value="10"></td> 
    <td><input name="unidad" type="text" value="MET"></td>
  </tr>
</table>

Metodo 2. keyup y paste event

Para los navegadores más antiguos una solución alternativa es utilizar el evento keypress, sin embargo este método no se dispara si el usuario hace clic con el botón secundario y pega en el menú contextual (o ctrl+c & ctrl+v). Para esto puedes usarlo junto con el evento de pegar quedando asi:

$('#table').on('keyup paste', ':input', function() { 
   var value = $(this).val(); //obtiene el valor actual del input.
   var name = $(this).prop('name');
    if (value.length > 0){ //si el campo no esta vacio
    console.log(name+": "+value);
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <th>Producto</th>
    <th>Cant</th> 
    <th>U.M</th>
  </tr>
  <tr>
    <td><input name="producto" type="text" value="HILO DE AGUA - AZUL MARINO"></td>
    <td><input name="cantidad" type="number" value="4"></td> 
    <td><input name="unidad" type="text" value="UND"></td>
  </tr>
  <tr>
    <td><input name="producto" type="text" value="ELASTICO PERSONALIZADO E3 2234"></td>
    <td><input name="cantidad" type="number" value="10"></td> 
    <td><input name="unidad" type="text" value="MET"></td>
  </tr>
</table>

1

document.getElementById('id_tabla').addEventListener('input', function() {
        actualizar($(this));
    });
    
    function actualizar(obj){
      console.log('cambios en '+obj.attr('id'));
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = 'id_tabla'>
  <tr>
    <th><input tpyte='text' value='sample'></th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

0

No se de que tipo sean tus inputs pero te dejo un ejemplo, aunque tiene ciertos inconvenientes al usar .keypress de jquery
(inconveniente: si tu campo es de tipo number al presionar cualquier letra se ejecutara, se puede arreglar con validaciones)

$(document).ready(function(){
  $('.cambio').keypress(function(){
    console.log("cambiando los otros inputs " + this.id);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="cambio" id="1">
<input type="text" class="cambio" id="2">

Este otro ejemplo funciona igual pero sin jquery el inconveniente de este es que tienes que declarar el atributo onkeypress en cada input:

function cambioInput(id){
  console.log("cambiando los otros inputs " + id);
}
<input type="text" onkeypress="cambioInput(this.id)" id="1">
<input type="text" onkeypress="cambioInput(this.id)" id="2">

0

Los eventos adecuados para detectar el cambio de un <input> o un <textarea> son beforeinput (no soportado aún) e input puede ser utilizado también.

Según la documentación en MDN:

El evento input es activado sincrónicamente cuando el valor de un elemento <input> o <textarea> cambió.


En cuanto a beforeinput, se ejecuta antes de input, como podemos ver en la especificación de W3, aunque no está del todo soportado.


Si vemos la documentación de keypress en MDN, el cual ya es un evento obsoleto, se sugiere utlizar el evento input.

The keypress event is fired when a key is pressed down and that key normally produces a character value (use input instead).

Aquí se puede ver la referencia en W3 que indica que keypress es obsoleto y que en su lugar se debería utilizar beforeinput:

The keypress event type is defined in this specification for reference and completeness, but this specification deprecates the use of this event type. When in editing contexts, authors can subscribe to the beforeinput event instead.


Pasando al código, la implementación es típica para el evento input:

$(function(){
  $('input').on('input', function(){
    console.log('hubo cambio: ' + $(this).val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="2">
<input type="number" value="3">

El problema de usar keypress es que ocurre antes del cambio, por lo cual si necesitas obtener el nuevo valor para hacer un cálculo o alguna otra acción, no te servirá.

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.