подсчет полей выдает NaN

251

20 декабря 2016, 23:23

Делаю калькулятор значений из полей формы. Должны подсчитываться горизонтальные значения и потом их значения складываться. Все как бы работает, но плохо... Во время подсчета в остальных полях появляются NaN и общую сумму подсчитывает только после того как что то введу в поле... Не могди бы помочь разобраться, как хотя бы избежать NaN?

var $form = $('#plantroom_details'),
  $summands = $form.find('.to_sum_total'),
  $sumDisplay = $('#total-cost-details');
  $form.delegate('.to_sum_total', 'change', function ()
  {
      var sum = 0;
      $summands.each(function ()
      {
          var value = Number($(this).val());
          if (!isNaN(value)) sum += value;
      });
      $sumDisplay.val(sum);
  });

  $(document).ready(function() {
     $('.form-control').change(function(e)  {
          var foundation_m3 = 0;
          var foundation_cost = 0;
          var foundation_width = parseFloat($('#foundation-width').val());
          var foundation_length = parseFloat($('#foundation-length').val());
          var foundation_depth = parseFloat($('#foundation-depth').val());
          foundation_m3 = foundation_width*foundation_length*foundation_depth;
          foundation_cost = foundation_m3*500;
          $('#foundation-m3').val(foundation_m3);
          $('#foundation-cost').val(foundation_cost);
          var walls_m2 = 0;
          var walls_cost = 0;
          var walls_width = parseFloat($('#walls-width').val());
          var walls_length = parseFloat($('#walls-length').val());
          var walls_structure = parseFloat($('#walls-structure').val());
          walls_m2 = walls_width*walls_length*walls_structure;
          walls_cost = walls_m2*200;
          $('#walls-m2').val(walls_m2);
          $('#walls-cost').val(walls_cost);

      });
     });

https://jsfiddle.net/qt6o0q6w/

Answer 1

Вам нужно добавить проверку полей. Если поле пустое, но оно не должно брать из него значение:
https://jsfiddle.net/yuri_spivak/qt6o0q6w/1/

var $form = $('#plantroom_details'),
      $summands = $form.find('.to_sum_total'),
      $sumDisplay = $('#total-cost-details');
      $form.delegate('.to_sum_total', 'change', function ()
      {
          var sum = 0;
          $summands.each(function ()
          {
              var value = Number($(this).val());
              if (!isNaN(value)) sum += value;
          });
          $sumDisplay.val(sum);
      });

      $(document).ready(function() {
         $('.form-control').change(function(e)  {
              var foundation_m3 = 0;
              var foundation_cost = 0;
              var foundation_width;
              var foundation_length;
              var foundation_depth;
              if($('#foundation-width').val() == ''){foundation_width = 1}else{foundation_width = parseFloat($('#foundation-width').val())};
              if($('#foundation-length').val() == ''){foundation_length = 1}else{foundation_length = parseFloat($('#foundation-length').val())};
              if($('#foundation-depth').val() == ''){foundation_depth = 1}else{foundation_depth = parseFloat($('#foundation-depth').val())};
              foundation_m3 = foundation_width*foundation_length*foundation_depth;
              foundation_cost = foundation_m3*500;
              $('#foundation-m3').val(foundation_m3);
              $('#foundation-cost').val(foundation_cost);
              var walls_m2 = 0;
              var walls_cost = 0;
              var walls_width;
              var walls_length;
              var walls_structure;
              if($('#walls-width').val() == ''){walls_width = 1}else{walls_width = parseFloat($('#walls-width').val())};
              if($('#walls-length').val() == ''){walls_length = 1}else{walls_length = parseFloat($('#walls-length').val())};
              if($('#walls-structure').val() == ''){walls_structure = 1}else{walls_structure = parseFloat($('#walls-structure').val())};
              walls_m2 = walls_width*walls_length*walls_structure;
              walls_cost = walls_m2*200;
              $('#walls-m2').val(walls_m2);
              $('#walls-cost').val(walls_cost);
          });
         });

ПОСЛЕДНИЕ ВОПРОСЫ

07:09
17:51

Как выбрать ноутбук для школьника
08:01
07:36

Что такое Grid Бот
07:00

Використання UGC контенту для соціальних мереж
21:22

Использование тестового аккаунта Google Analytics
20:00

Почему стоит покупать лицензионное ПО
20:14
07:41

Методы повышения посещаемости веб-сайта

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

Обработчик нажатия на кнопку в JQuery с цикле [требует правки]

Добрый День! есть кнопка и функция, которая совершает обработку нажатия на данную кнопку на JQueryМысль такая: как сделать цикл, чтобы при нечетном...

244

jQuery