How to detect value change on hidden input field

Question

I have a textarea in my MVC application where I'm implementing AspNetSpellCheck, the debugger tells me that the textarea changes to display: none; visibility: hidden; and a div is generated with id="abc" and class"="pqr".

<input type="hidden" value="" name="userid" id="useid" />

Also I'm implementing change detection for all text area/other controls....

var somethingChanged = false;
$(document).ready(function() { 
    $('input').change(function() { 
       somethingChanged = true; 
    }); 
});

Because the text area becomes hidden, I suppose it doesn't automatically fire the change() event. What is the solution to fire the event in above case? Thanks!

EDIT

With AspNetSpellCheck, below is my code,

  @{  

  ASPNetSpell.Razor.SpellAsYouType mySpell = new ASPNetSpell.Razor.SpellAsYouType();
   mySpell.InstallationPath = ("/Content/ASPNetSpellInclude");
   mySpell.FieldsToSpellCheck = "TextArea1";
}

<textarea id="TextArea1" cols="20" rows="2">bedddly</textarea>
@Html.Raw(mySpell.getHtml())

<script type="text/javascript" language="javascript">

$(document).ready(function () {
    $('input[type="hidden"]').change(function () {
        debugger;
        alert('hi');
        // somethingChanged = true; 
    });
});


 </script>

Debugger produce below code, text area hidden and a new DIV construct,

 <div tabIndex="null" class="livespell_textarea" id="TextArea1___livespell_proxy">

 <textarea id="TextArea1" style="display: none; visibility: hidden;" rows="2" cols="20">

duplicate of http://stackoverflow.com/questions/6533087/jquery-detect-value-change-on-hidden-input-field — Daniel P, Sep 27 '13 at 15:32

score 15 · Answer 1 · answered Oct 04 '12 at 16:30

15

With hidden values, you'll need to trigger the change event yourself ala:

$('#hiddenInput').val('newval').trigger('change');

answered Oct 04 '12 at 16:30

user1026361

3,627
3
22
20

score 5 · Accepted Answer · edited Jan 02 '22 at 12:13

5

if you dont know when the value is being changed in the textarea you can use setInterval to moniter the change

Eg

  var objTextBox = document.getElementById("your_id");
  oldValue = objTextBox.value;

  function track_change() {
    if (objTextBox.value != oldValue) {
      oldValue = objTextBox.value;
      alert('value of input has changed');
    }
  }

  setInterval(function () {
    track_change()
  }, 1000);

edited Jan 02 '22 at 12:13

Faizan Ahmad

355
3
14

answered Oct 04 '12 at 16:37

GajendraSinghParihar

9,051
11
36
64

only if you know when the value of the textarea is being changes – GajendraSinghParihar Oct 04 '12 at 17:13

score 2 · Answer 3 · answered Oct 04 '12 at 16:32

2

Try this.. Trigger the event Yourself

$('input[type="hidden"]').change(function() { 
     alert('hi');
      // somethingChanged = true; 
});

$('#useid').val("20").change();

FIDDLE

answered Oct 04 '12 at 16:32

Sushanth --

55,259
9
66
105

not work...

– user584018 Oct 04 '12 at 16:53

How to detect value change on hidden input field

3 Answers3