jQuery trigger function on change
- by Michael Pasqualone
I have the following two slider functions which work well and display like so:
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("value") * transferCost;
$("#dataamountUnit").val('$' + transferAmount.toFixed(2));
});
