1

tengo el siguiente código en el que imprimo el campo observación de mi tabla evaluación

<td>
<input data-id_observa="<?php echo $evaluacion['id_evaluacion']; ?>" class="form-control" type="text" value="<?php echo $evaluacion['observacion']; ?>" id="observa">
</td>

he colocado el input porque quiero que ese campo sea editable, ahora lo que yo quiero es que después de haber editado dicho campo y al hacer clic fuera de él esto se guarde automáticamente, a través de JavaScript lo he logrado con el método blur pero lo que no me carga es el valor que ingresado en el input aquí les muestro mi código JS

$(document).on("blur", "#observa", function() {
    var id = $(this).data("id_observa");
    //obtener el valor ingresado en el input
    var observa = $(this).text();

    alert(observa);
})

a ver si me pueden ayudar por favor, como puedo mostrar los datos ingresado en el input lo intente a través de getElementById pero solo me carga el valor de la primera fila cuando ingreso datos en otra fila y hago clic fuera me sigue apareciendo los datos ingresado en la primera fila.

1
  • ¿Existe sólo un elemento con atributo id igual a observa? Porque si hay más de uno ese es un problema. Saludos el 19 jul. 2022 a las 7:12

1 respuesta 1

0

Creo que quedaría así, donde el input al perder el foco ejecutara la función que especifiques, en este caso los alert, ejemplo:

$(document).ready(function() {
  $(".observa").on("blur", function() {
    //obtener el id ingresado en el input
    var id = $(this).attr("id");
    //obtener el valor ingresado en el input
    var observa = $(this).val();

    alert('El id del input en el que estabas es: ' + id);
    alert('El value del input en el que estabas es: ' + observa);
  });
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <body>

    <input id="5" class="form-control observa" type="text" value="Aun no hay valor PHP">

    <input id="2" class="form-control observa" type="text" value="Otro valor PHP">
  </body>

</html>

Si modificas el value de los input te mostrara el valor modificado en el alert. Dime si te sirbio.

1
  • Excelente amigo muchas gracias por tu ayuda, me sirvió muchísimo.
    – Laurencio
    el 20 jul. 2022 a las 1:32

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.