How to detect value change on hidden input field in JQuery ? - GeeksforGeeks

03 Aug, 2021
In the <input> element with the type=”hidden”, the change() method of jQuery is not automatically triggered. The change() method is only triggered automatically when the user himself changes the value of the field and not the developer. When the developer changes the value inside the hidden field, he has to trigger the change as well.
There two possible way to detect the value change on the hidden input field:
By using bind() method
By using change() method
Below examples will illustrate both the methods to detect the change of value in the hidden field.
Example 1: The following example uses the inbuilt bind() method of 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>
Output:
Example 2: The following example uses the inbuilt change() method of 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>
Output:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
AnasShamoon
ManasChhabra2
jQuery-Misc
Picked
JQuery
Technical Scripter
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
How to get the ID of the clicked button using JavaScript / jQuery ?
How to reset a form using jQuery with .reset() method?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?