jQuery trigger function on change

I have the following two slider functions which work well and display like so: alt text http://mpasqualone.com/sliders.png

I have diskAmount and transferAmount stored in global vars, however what I am now trying to figure out is how do I get the sum of the two to initially show as the monthly fee, and then update when either of the two sliders are changed.

So in my screenshot above the initial state will be $24.75, and the fee will update if the sliders change.

Can anyone point me in the right direction? I get can the initial fee to show, but can't figure out how to get 1 function to call another function within jQuery.

$(function() {
        $("#disk").slider({
            value:3,
            min: 1,
            max: 80,
            step: 1,
            slide: function(event, ui) {
                $("#diskamount").val(ui.value + ' Gb');
                $("#diskamountUnit").val('$' + parseFloat(ui.value * diskCost).toFixed(2));
            }
        });
        // Set initial diskamount state
        $("#diskamount").val($("#disk").slider("value") + ' Gb');
        // Set initial diskamountUnit state
        diskAmount = $("#disk").slider("value") * diskCost;
        $("#diskamountUnit").val('$' + diskAmount.toFixed(2));

    });

    $(function() {
        $("#data").slider({
            value:25,
            min: 1,
            max: 200,
            step: 1,
            slide: function(event, ui) {
                $("#dataamount").val(ui.value + ' Gb');
                $("#dataamountUnit").val('$' + parseFloat(ui.value * transferCost).toFixed(2));
            }
        });
        // Set initial dataamount state
        $("#dataamount").val($("#data").slider("value") + ' Gb');
        // Set initial dataamountUnit state
        transferAmount = $("#data").slider("va开发者_运维技巧lue") * transferCost;
        $("#dataamountUnit").val('$' + transferAmount.toFixed(2));      
    });

function updateTotal($0,$1){
   $('#monthly').text('$' + ($0+$1).toFixed(2))
}

then call it in every slide like so,

for $("#disk")

slide: function(event, ui) {
       $("#dataamount").val(ui.value + ' Gb');
       $("#dataamountUnit").val('$' + parseFloat(ui.value * transferCost).toFixed(2));
       updateTotal(parseFloat(ui.value * transferCost), $("#data").slider("value") * transferCost)
}

for $("#data")

slide: function(event, ui) {
       $("#dataamount").val(ui.value + ' Gb');
       $("#dataamountUnit").val('$' + parseFloat(ui.value * transferCost).toFixed(2));
       updateTotal(parseFloat(ui.value * transferCost), $("#disk").slider("value") * transferCost)
}

Both slide handlers need to call (or execute inline if you want to be redundant) a function to add the two values together.

I would save the actual value (before you add GB or $) to the element itself, like

$("#dataamount").val(ui.value + 'Gb').data('value', ui.value);

that way you can access it in your addition function

function updateTotal() {
  var total = $("#diskamount").data('value') +  $("#dataamount").data('value');
  $('#total').val( "$" + parseFloat(total * diskCost).toFixed(2));
}

perhaps not the right id's, but i think you'll get the idea...

Here's what I've done; based heavily with what Reigel suggested:

for: $("#data")

slide: function(event, ui) {
    $("#dataamount").val(ui.value + ' Gb');
    transferAmount = parseFloat(ui.value * transferCost);
    $("#dataamountUnit").val('$' + parseFloat(transferAmount).toFixed(2));
    updateTotals(transferAmount,diskAmount);
}

This way I don't need to do calculations through the rest of my code and can just call var transferAmount whenever I need to. Thanks Dan & Reigel.

function updateTotals($0,$1) {
    $('#totalMonthlyFee').val(($0+$1).toFixed(2));
}