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:
- Usando el método bind()
- Usando el método change()
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