jQuery addClass when value of hidden input changes dyamically

Question

I have a contact form that sends a value to a hidden input on successful completion of the sendmail function. I want to detect this value change and then use it to apply a class to a div/paragraph.

I asked a similar question recently and I'm aware that this requires the script to continually check the doc after DOM is loaded but even after adding .change() it just doesn't seem to want to add the class.

Here's the jQuery:

$(document).ready(function() {
   $("#acf_success_sent").change(function(){
    if ($("#acf_success_sent").val() == "1"){
     $("#acf_verified").addClass('gone');
     }
   });

 });

any help would be great. here's a link to a test version of form in case you're interested, everything works except the verified symbol doesn't disappear after a successful send http://seeshell.me/forms/contact.php

Pointy · Accepted Answer · 2011-06-11 11:41:40Z

2

There'll be no "change" event fired when code updates the value of your <input> element, so the handler you've registered won't run. What you could do however is fire "change" from a watchdog:

var watchdog = setInterval(function() {
  if ($('#acf_success_sent').val() !== originalValue)
    $('#acf_success_sent').trigger('change');
}, 100);

How you set up "originalValue" depends on your application. You could, for example, keep a separate ".data()" value, and watch for whenever your saved value differs from the current "value" attribute. Or you could keep the value in a closure variable:

var watchdog = (function() {
  var $acfSuccessSent = $('#acf_success_sent'), cachedValue = $acfSuccessSent.val();
  return function() {
    if (cachedValue !== $acfSuccessSent.val())
      $acfSuccessSent.trigger('change');
  };
})();

edited Jun 11, 2011 at 11:41

answered Jun 11, 2011 at 11:30

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

tcnarss Over a year ago

originalValue will always be 0 unless form is sent so I can just put !== "0") i guess?! ill try it out. thank you

Pointy Over a year ago

Yes, if you know the original value, and you only care about changes from that, then you can simplify. Also, of course, to get even simpler, you could always do all the work inside the timer routine itself :-)

tcnarss Over a year ago

it worked 1st time. Thank you very much, buying a jQuery book right now, I'm fed up of being so lame.

Pointy Over a year ago

Good news: O'Reilly is running a sale on JavaScript books (maybe US-only unfortunately ...) (also, sorry about that, person from 2012 :-)

mplungjan Over a year ago

or if ($('#acf_success_sent').val() !== $('#acf_success_sent')[0].defaultValue)

|

Collectives™ on Stack Overflow

jQuery addClass when value of hidden input changes dyamically

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related