¿Cómo detectar el cambio de valor en el campo de entrada oculto en JQuery?

En el elemento <input> con type=”hidden” , el método change() de jQuery no se activa automáticamente. El método change() solo se activa automáticamente cuando el propio usuario cambia el valor del campo y no el desarrollador. Cuando el desarrollador cambia el valor dentro del campo oculto, también debe activar el cambio .

Hay dos formas posibles de detectar el cambio de valor en el campo de entrada oculto:

Los siguientes ejemplos ilustrarán ambos métodos para detectar el cambio de valor en el campo oculto.

Ejemplo 1: El siguiente ejemplo utiliza el método bind() incorporado de jQuery.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        By using bind() method detecting change
        of value in the hidden field
    </title>
  
    <script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous">
    </script>
</head>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h3>By using bind() method</h3>
      
    <form>
        <input type="hidden" value="" id="hidField">
  
        <button type="button" id="changeValue"> 
            Click to change value 
        </button>
    </form>
      
    <script>
        $(document).ready(function() {
  
            alert("Value of hidden field before updating: "
                        + $("#hidField").val());
  
            $("#changeValue").click(function() {
                $("#hidField").val(10).trigger("change");
            });
  
            $("input[type='hidden']").bind("change", function() {
                alert("Value of hidden field after updating: "
                            + $(this).val());
            });
        })
    </script>
</body>
  
</html>

Producción:

Ejemplo 2: El siguiente ejemplo utiliza el método change() incorporado de jQuery.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        By using change() method detecting change
        of value in the hidden field
    </title>
      
    <script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h3>By using change() method</h3>
      
    <form>
        <input type="hidden" value="" id="hidField">
        <br>
  
        <button type="button" id="changeValue"> 
            Click to change value 
        </button>
    </form>
      
    <script>
        $(document).ready(function() {
  
            alert("Value of hidden field before updating: "
                        + $("#hidField").val());
  
            $("#changeValue").click(function() {
                $("#hidField").val(101).trigger("change");
            });
  
            $("#hidField").change(function() {
                alert("Value of hidden field after updating: "
                        + $("#hidField").val());
            });
        })
    </script>
</body>
  
</html>

Producción:

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

Artículo escrito por AnasShamoon y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *