需要使用Javascript从下拉表单字段中计算总计

Question

I have a form. It's a timesheet, sort of. It has dropdown form fields for each day Monday though Sunday for hours worked each day. The values in each drop down range from 0.00 to 12.00 in increments of 0.25 (ie 0.00, 0.25, 0.50, 0.75, 1.00 ... 11.00, 11.25, 11.50, 11.75, 12.00). I have tried to calculate the total of all the days of the week selected values into another text form field. Here's my JS

$(document).ready(function () {

var mon, tue, wed, thu, fri, sat, sun, total;
if ($('#form_36379').length) {
$(document).change(function () {
mon = $('#element_47').val();
tue = $('#element_49').val();
wed = $('#element_51').val();
thu = $('#element_53').val();
fri = $('#element_55').val();
sat = $('#element_57').val();
sun = $('#element_58').val();
total = parseFloat(mon) + parseFloat(tue) + parseFloat(wed) + parseFloat(thu) + parseFloat(fri) + parseFloat(sat) + parseFloat(sun);
$('#element_60').val(parseFloat(total).toFixed(2));

});
}
});

My results are either NaN or some other concatenated value.

NaN appears in the total element until all fields have a value selected. Once all elements have a value then I get a calculation. Example: Mon = 2.75, Tue = 2.75, Wed = 2.75, Thu = 2.75, Fri = 2.75, Sat = 2.75, Sun = 2.75 then total field (element_60) = 56 when it should total 19.25

Can someone point me in the right direction as to what I am missing?

Answer 1

You can try listen change event of dropdowns for example:

I have 3 dropdowns

    <select class="day-dropdown dropdown1">
      <option value="0.00"><option>
      <option value="0.25"><option>
      <option value="0.50"><option>
    </select>
    <select class="day-dropdown dropdown2">
      <option value="0.00"><option>
      <option value="0.25"><option>
      <option value="0.50"><option>
    </select>
    <select class="day-dropdown dropdown3">
      <option value="0.00"><option>
      <option value="0.25"><option>
      <option value="0.50"><option>
    </select>

JS code

$('.day-dropdown').on('change', function(){
    var dropdowns = $('.day-dropdown'),
        total = 0;

    $.each(dropdowns, function(index, elem){
       var optionSelectedVal = $(this).find('option:selected').val();
       if(optionSelectedVal){
          optionSelectedVal = parseInt(optionSelectedVal);
          total+= optionSelectedVal;
       }
    });
    if(total > 0){
       $('.input-class').val(total.toFixed(2));
    }
});

Blessings.