Proper way to perform live JavaScript updates in a form

[-Ice-]

I have an overlay form with some radio buttons, checkboxes, etc. and I would like to have some JavaScript that gets called every time a selection to these elements is changed, in order to update a field at the bottom of the form.

Here's a picture if it helps put it into context


I'd like to update the "final price" field depending on how many extra people (if any) are specified. I also have a few template variables that I would like to use when evaluating the final price, is there an easy way to get them in js?

I watched and attempted to understand these videos, but they aren't exactly what I'm looking for. This is the code I have so far:

!function($, window, document, _undefined)
{
    XenForo.Storefront={
        UpdateTotals: function($form){
            $form.bind('???', function(e)){
               
            }
 
        }
    };
   
    XenForo.register('form.PurchaseForm', 'Xenforo.Storefront.UpdateTotals');
   
}
(jQuery, this, document);

I wrote that by looking at other add-ons and those videos. Does anyone know the event that I should bind to, like an "OnFormChanged" or something similar?

I'm not nearly as proficient with javascript as I'd like to be, so any help would be much appreciated. The 'ol google machine didn't really help much with this one, if there are similar discussions out there I apologize in advance.

 

[-Ice-]

Figured this one out on my own too. Maybe I should get really desperate before posting on here . Anyway, to help anyone with the same problem:

!function($, window, document, _undefined)
{
 
    XenForo.Storefront={
        UpdateTotals: function($form){
            $form.bind('change', function (e) {
                alert("Something Changed");
                // Actually do useful things here
            });
        }
    };
 
    XenForo.register('form.PurchaseForm', 'XenForo.Storefront.UpdateTotals');
 
}
(jQuery, this, document);