Need to add totals of select list, and subtract if taken away

This is the code I am using to calculate the sum of two values (example below)

This works to a degree. It will add the two together but only if #edit-submitted-test is selected first, and even then it will show NaN until I select #edit-submitted-test-1.

I want it to calculate the sum of the fields and show the amount live, i.e. the value of edit-submitted-test-1 will show 500, then if i select another field it will update to 1000. If i take one selection away it will then subtract it and will be back to 500. Any ideas would be helpful thanks!

Drupal.behaviors.bookingForm = function (context) {
// some debugging here, remove when you're finished
console.log('[bookingForm] started.');

// get number of travelers and multiply it by 100
function recalculateTotal() {

    var count = $('#edit-submitted-test').val();
    count = parseFloat( count );
    var cost = $('#edit-submitted-test-1').val();
    cost = parseFloat( cost );
    $('#edit-submitted-total').val( count + cost );
}

// run recalculateTotal every time user enters a new value
var fieldCount = $('#edit-submitted-test');
var fieldCount = $('#edit-submitted-test-1');
fieldCount.change( recalculateTotal );

// etc ...
};

EDIT

For some reason, this breaks my Drupal Webform Conditional module in Firefox but its working on Google Chrome.

The only thing I can see is that I have added another js script that caclulates totals of fields (the script also includes fields that may be hidden at the time), and maybe that this is the reason for breakage.

The script I am using is

Drupal.behaviors.bookingForm = function (context) {
// some debugging here, remove when you're finished
console.log('[bookingForm] started.');

// get number of travelers and multiply it by 100
function recalculateTotal() {

var course43 = $('#edit-submitted-transfer-i-would-like-to-arrange-a-transfer-to-my-accomodation-from').val();
    course43 = course43 ? parseFloat(course43) : 0;
    var course44 = $('#edit-submitted-insurance-visas-and-confirmation-would-you-like-us-to-send-your-confirmation-of-booking-by-dhl-at-cost-of-70-for-europe-and-90-for-the-rest-of-the-world').val();
    course44 = course44 ? parseFloat(course44) : 0;
    var course40 = $('#edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-30').val();
    course40 = course40 ? parseFloat(course40) : 0;
    var course41 = $('#edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-31').val();
    course41 = course41 ? parseFloat(course41) : 0;
    var course42 = $('#edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-32').val();
    course42 = course42 ? parseFloat(course42) : 0
    var course2 = $('#edit-submitted-course-details-how-many-weeks-would-you-like-the-course-for-2').val();
    course2 = course2 ? parseFloat(course2) : 0;
    var course4 = $('#edit-submitted-course-details-how-many-weeks-would-you-like-the-course-for-4').val();
    course4 = course4 ? parseFloat(course4) : 0;
    var course5 = $('#edit-submitted-course-details-how-many-weeks-would-you-like-the-course-for-5').val();
    course5 = course5 ? parseFloat(course5) : 0
    var course6 = $('#edit-submitted-course-details-how-many-weeks-would-you-like-the-course-for-6').val();
    course6 = course6 ? parseFloat(course6) : 0;
    var course30 = $('edit-submitted-course-details-when-would-you-like-to-start-30').val();
    course30 = course30 ? parseFloat(course30) : 0;
    var course31 = $('edit-submitted-course-details-when-would-you-like-to-start-31').val();
    course31 = course31 ? parseFloat(course31) : 0;
    var course = $('#edit-submitted-course-details-how-many-weeks-would-you-like-the-course-for').val();
    course = course ? parseFloat(course) : 0;
    var course7 = $('#edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-7').val();
    course7 = course7 ? parseFloat(course7) : 0;
    var course3 = $('#edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-3').val();
    course3 = course3 ? parseFloat(course3) : 0;
    var course12 = $('#edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-12').val();
    course12 = course12 ? parseFloat(course12) : 0;
    var course13 = $('#edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-13').val();
    course13 = course13 ? parseFloat(course13) : 0;
    var course9 = $('#edit-submitted-intensive-option-two-how-many-weeks-would-you-like-the-course-for-9').val();
    course9 = course9 ? parseFloat(course9) : 0;
    var course8 = $('#edit-submitted-intensive-option-two-how-many-weeks-would-you-like-the-course-for-8').val();
    course8 = course8 ? parseFloat(course8) : 0;
    var course10 = $('#edit-submitted-intensive-option-two-how-many-weeks-would-you-like-the-course-for-10').val();
    course10 = course10 ? parseFloat(course10) : 0;
    var course11 = $('#edit-submitted-intensive-option-two-how-many-weeks-would-you-like-the-course-for-11').val();
    course11 = course11 ? parseFloat(course11) : 0;
    var other1 = $('#edit-submitted-other-options-would-you-like-to-purchase-a-pre-arrival-online-learning-course').val();
    other1 = other1 ? parseFloat(other1) : 0;
    var other2 = $('#edit-submitted-other-options-please-select-number-of-weeks').val();
    other2 = other2 ? parseFloat(other2) : 0;
    var w1 = $('#edit-submitted-accomodation-kings-twin-weeks').val();
    w1 = w1 ? parseFloat(w1) : 0;
    var w2 = $('#edit-submitted-accomodation-haynt-singleensuite-weeks').val();
    w2 = w2 ? parseFloat(w2) : 0;
var w3 = $('#edit-submitted-accomodation-queens-singleensuite-weeks').val();
    w3 = w3 ? parseFloat(w3) : 0;
var w4 = $('#edit-submitted-accomodation-queens-singleprivate-weeks').val();
    w4 = w4 ? parseFloat(w4) : 0;
var w5 = $('#edit-submitted-accomodation-haynt-singlelarge-weeks').val();
    w5 = w5 ? parseFloat(w5) : 0;
var w6 = $('#edit-submitted-accomodation-homestay-twinsupbd-weeks').val();
    w6 = w6 ? parseFloat(w6) : 0;
var w7 = $('#edit-submitted-accomodation-homestay-twinstandardb-weeks').val();
    w7 = w7 ? parseFloat(w7) : 0;
var w8 = $('#edit-submitted-accomodation-homestay-supbd-weeks').val();
    w8 = w8 ? parseFloat(w8) : 0;
var w9 = $('#edit-submitted-accomodation-homestay-standardplusbd-weeks').val();
    w9 = w9 ? parseFloat(w9) : 0;
var w10 = $('#edit-submitted-accomodation-homestay-twinstandardbd-weeks').val();
    w10 = w10 ? parseFloat(w10) : 0;
var w11 = $('#edit-submitted-accomodation-homestay-twinstandardplusb-weeks').val();
    w11 = w11 ? parseFloat(w11) : 0;
var w12 = $('#edit-submitted-accomodation-homestay-standardbd-weeks').val();
    w12 = w12 ? parseFloat(w12) : 0;
var w13 = $('#edit-submitted-accomodation-catholic-singleshared-weeks').val();
    w13 = w13 ? parseFloat(w13) : 0;
var w14 = $('#edit-submitted-accomodation-catholic-singleprivate-weeks').val();
    w14 = w14 ? parseFloat(w14) : 0;
var w15 = $('#edit-submitted-accomodation-homestay-supb-weeks').val();
    w15 = w15 ? parseFloat(w15) : 0;
var w16 = $('#edit-submitted-accomodation-homestay-standardplusb-weeks').val();
    w16 = w16 ? parseFloat(w16) : 0;
var w17 = $('#edit-submitted-accomodation-homestay-ind-weeks').val();
    w17 = w17 ? parseFloat(w17) : 0;
var w18 = $('#edit-submitted-accomodation-homestay-twinsupb-weeks').val();
    w18 = w18 ? parseFloat(w18) : 0;
var w19 = $('#edit-submitted-accomodation-haynt-singlestandard-weeks').val();
    w19 = w19 ? parseFloat(w19) : 0;
var w20 = $('#edit-submitted-accomodation-homestay-singlebbstd-weeks').val();
    w20 = w20 ? parseFloat(w20) : 0;
var w21 = $('#edit-submitted-accomodation-homestay-twinstandardplusbd-weeks').val();
    w21 = w21 ? parseFloat(w21) : 0;
var w22 = $('#edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-5').val();
    w22 = w22 ? parseFloat(w22) : 0;
var w23 = $('#edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-11').val();
    w23 = w23 ? parseFloat(w23) : 0;
var w24 = $('##edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-2').val();
    w24 = w24 ? parseFloat(w24) : 0;
var w25 = $('#edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-8').val();
    w25 = w25 ? parseFloat(w25) : 0;
var w26 = $('#edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-3').val();
    w26 = w26 ? parseFloat(w26) : 0;
var w27 = $('#edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-7').val();
    w27 = w27 ? parseFloat(w27) : 0;
var w28 = $('#edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-1').val();
    w28 = w28 ? parseFloat(w28) : 0;
var w29 = $('#edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-6').val();
    w29 = w29 ? parseFloat(w29) : 0;
var w30 = $('#edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-4').val();
    w30 = w30 ? parseFloat(w30) : 0;
    $('#edit-submitted-courses-cost').val( course2 + course4 + course5 + course6 + course + course7 + other1 + other2 + course3 + course12 + course13 + course9 + course8 + course10 + course11 + course30 + course31 + course40 + course41 + course42 );
 $('#edit-submitted-accomodation-cost').val( w1 + w2 + w3 + w4 + w5 + w6 + w7 + w8 + w9 + w10 + w11 + w12 + w13 + w14 + w15 + w16 + w17 + w18 + w19 + w20 + w21 + w22 + w23 + w24 + w25 + w26 + w27 + w28 + w29 + w30 );
$('#edit-submitted-transfer-insurance-costs').val( course43 + course44 );
}

// run recalculateTotal every time user enters a new value
var fieldCount = $('#edit-submitted-insurance-visas-and-confirmation-would-you-like-us-to-send-your-confirmation-of-booking-by-dhl-at-cost-of-70-for-europe-and-90-for-the-rest-of-the-world, #edit-submitted-transfer-i-would-like-to-arrange-a-transfer-to-my-accomodation-from, #edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-32, #edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-31, #edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-30, #edit-submitted-course-details-how-many-weeks-would-you-like-the-course-for-5, #edit-submitted-course-details-how-many-weeks-would-you-like-the-course-for-4, #edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-7, #edit-submitted-course-details-how-many-weeks-would-you-like-the-course-for, #edit-submitted-course-details-how-many-weeks-would-you-like-the-course-for-6, #edit-submitted-course-details-how-many-weeks-would-you-like-the-course-for-2, #edit-submitted-other-options-please-select-number-of-weeks, #edit-submitted-other-options-would-you-like-to-purchase-a-pre-arrival-online-learning-course, #edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-3, #edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-12, #edit-submitted-intensive-option-one-how-many-weeks-would-you-like-the-course-for-13, #edit-submitted-intensive-option-two-how-many-weeks-would-you-like-the-course-for-9, #edit-submitted-intensive-option-two-how-many-weeks-would-you-like-the-course-for-8, #edit-submitted-intensive-option-two-how-many-weeks-would-you-like-the-course-for-10, #edit-submitted-intensive-option-two-how-many-weeks-would-you-like-the-course-for-11, edit-submitted-course-details-when-would-you-like-to-start-30, edit-submitted-course-details-when-would-you-like-to-start-31, #edit-submitted-accomodation-kings-twin-weeks, #edit-submitted-accomodation-haynt-singleensuite-weeks, #edit-submitted-accomodation-queens-singleensuite-weeks, #edit-submitted-accomodation-queens-singleprivate-weeks, #edit-submitted-accomodation-haynt-singlelarge-weeks, #edit-submitted-accomodation-homestay-twinsupbd-weeks, #edit-submitted-accomodation-homestay-twinstandardb-weeks, #edit-submitted-accomodation-homestay-supbd-weeks, #edit-submitted-accomodation-homestay-standardplusbd-weeks, #edit-submitted-accomodation-homestay-twinstandardbd-weeks, #edit-submitted-accomodation-homestay-twinstandardplusb-weeks, #edit-submitted-accomodation-homestay-standardbd-weeks, #edit-submitted-accomodation-开发者_StackOverflow中文版catholic-singleshared-weeks, #edit-submitted-accomodation-catholic-singleprivate-weeks, #edit-submitted-accomodation-homestay-supb-weeks, #edit-submitted-accomodation-homestay-standardplusb-weeks, #edit-submitted-accomodation-homestay-ind-weeks, #edit-submitted-accomodation-homestay-twinsupb-weeks, #edit-submitted-accomodation-haynt-singlestandard-weeks, #edit-submitted-accomodation-homestay-singlebbstd-weeks, #edit-submitted-accomodation-homestay-twinstandardplusbd-weeks, #edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-5, #edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-11, #edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-2, #edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-8, #edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-3, #edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-7, #edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-1, #edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-6, #edit-submitted-accomodation-how-many-weeks-accommodation-do-you-require-4') .change( recalculateTotal );

// etc ...
};

My form is here http://www.healthybrighton.co.uk/wse/node/1

Any ideas on how to fix this?

Add an additional check:

count = count ? parseFloat(count) : 0;

If count is empty (or more specific, evaluates to false), 0 will be assigned to it. Do the same for cost.

Or, if the select elements have a certain value selected by default, you might want to test against this, e.g.

 count = (count !== 'defaultValue') ? parseFloat(count) : 0;

Btw. you assign the change handler wrongly. It should be:

$('#edit-submitted-test, #edit-submitted-test-1').change( recalculateTotal );

Otherwise you will assign the change handler only to the last value of fieldCount, which is $('#edit-submitted-test-1').