Add JS to Commerce Add to Cart form

Question

I'd like to add my own JS functions to the Commerce "add to cart" form when a user makes selections on various product attributes.

When the user clicks through the options available, I need to scan the form using JS for the current values of the radiobuttons/selects. I need this to happen as soon as the form elements have changed.

edit: Having some success with the following, however since the form changes every single attribute this makes my javascript function run many, many times.

(function($) {
  Drupal.behaviors.watch = {
    attach: function(context, settings) {
      //look at form values here.
      //this fires after each form element is updated

    }
  }
})(jQuery);

Forgive me if this question sounds a bit lazy, I am reading the documentation, but I've not seen anything yet.

Answer 1

When you use Drupal's "attach" behaviors, use the provided context parameter in your jQuery selectors to limit the selector scope to only the part of the page that is being modified by AJAX:

(function($) {
  Drupal.behaviors.watch = {
    attach: function(context, settings) {
      $('.my-input', context).val('foo');
    }
  }
})(jQuery);