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

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        By using bind() method detecting change
        of value in the hidden field
    </title>
  
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>

chevron_right


Output:

Example 2: The following example uses the inbuilt change() method of jQuery.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        By using change() method detecting change
        of value in the hidden field
    </title>
      
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>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : AnasShamoon, ManasChhabra2