title: Detecting change in hidden form field
body: <p>Im writing a test code to do a counter that stores the value in a hidden form field. Whenever this counter is incremented with a button click, the counter value is stored in the hidden field. I have no problem with this portion.</p>
  
  <p>However, im having problem to display an alert whenever the hidden field is being changed. Pls see my code below and tell me where i have gone wrong. Thank You.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
          function startRolling() {
              var storage=document.getElementById('store').value;  
  
              var tonum;
  
              if(parseInt(storage)==0)
                  {
                      tonum=1;
  
                  }
               else {
                   tonum=parseInt(storage,10);
  
               }
  
              tonum=tonum+1;
              document.getElementById('store').value=tonum;
              storage=document.getElementById('store').value;
              alert(storage)
          }
  
  
          $(document).ready(function() {
  var content = $('#store').val();
  
  $('#store').change(function() { 
      if ($('#store').val() != content) {
  
          alert('Content has been changed')
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <pre><code>    &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="button" id="trigger" value="Start" onclick="startRolling()"/&gt;
      &lt;input type="text" id="cnt" readonly="readonly"/&gt;
      &lt;input type="hidden" id="store" value="0"/&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>