Need Javascript to calculate total from dropdown form fields

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 (i.e. 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?

Then the values of #element_47 to #element_58 isn't what you are expecting, such as being unable to be converted to a number (hence NaN). You aren't telling us the values of them so that's about all the help I can give you, what are the values of those elements? — Spencer Wieczorek
try addinng one day at a time and seeing which one is causing ur code to NaN.. else provide a more complete example — Sajjan Sarkar
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 — Jeremy

Mauricio Trinidad Mauricio Trinidad · Accepted Answer · 2016-11-01T21:43:40

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.

Need Javascript to calculate total from dropdown form fields

1 Answers