Объединить два куска кода в один

437
06 августа 2021, 18:00

Всем привет, мучаю калькулятор, есть два куска кода, один предназначен для того чтобы суммировать значения в select, другой суммировать значения выбранных chackbox, но столкнулся с проблемой, не могу понять как их объединить чтобы работали вместе, подскажите, пожалуйста.

function GetData() { 
  var sum = 0; 
  var s = $('select').change(function() { 
    s.each(function() { 
      sum += Number(this.value) || 0; 
    }); 
    document.getElementById('result_cum').innerHTML = "Примерная стоимость установки: " + sum; 
    // console.log(sum); 
  }); 
} 
 
 
$("input").click(function() { 
  $("input:checked").each(function() { 
    sum += Number($(this).val()); 
  }); 
  conslog.log(sum); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form class="form align-center" id="col_form_name" method="POST" name="ccol_form_name" OnChange='GetData()'> 
  <div class="row"> 
    <div class="col-md-8 col-md-offset-2"> 
 
      <div class="newsletter-label font-alt"> 
        Расчет стоимости ГБО 
      </div> 
      <div class="section-text align-center mb-70 mb-xs-40"> 
        Узнайте примерную стоимость установки ГБО 
      </div> 
      <form action="" class="form contact-form" id="col_form_name" method="POST" name="col_form_name" OnChange='GetData()'> 
        <div class="clearfix"> 
          <div class="cf-left-col"> 
            <div class="form-group"> 
              <select class="input-md form-control" id="sel"> 
                <option>Выберите количество цилиндров</option> 
                <option>4 цилиндра</option> 
                <option>6 цилиндров</option> 
                <option>8 цилиндров</option> 
                <option>ГАЗель</option> 
              </select> 
 
            </div> 
            <div class="form-group"> 
              <select class="input-md form-control" id="sel1"> 
                <option>Выберите оборудование</option> 
                <!--4 цилиндра--> 
                <option value="13000">OMVL SAVER-4 (Италия) - Лидер продаж в РФ</option> 
                <option value="11700">Digitronic – (Польша)</option> 
                <option value="7000">Atiker (Турция) – бюджетный комплет оборудования</option> 
                <option value="12400">BRC- (Италия), Оборудование премиум класса)</option> 
                <!--end 4 цилиндра--> 
                <!--6 цилиндра--> 
                <option value="17500">OMVL -6 (Италия), Лидер продаж в РФ</option> 
                <option value="20800">OMVL -6 OBD (Италия) , Премиум линейка</option> 
                <option value="28400">BRC- (Италия), Оборудование премиум класса</option> 
                <!--8 цилиндра--> 
                <option value="23000">OMVL -8 OBD (Италия) - Премиум линейка</option> 
                <option value="33600">BRC- (Италия), Оборудование премиум класса</option> 
              </select> 
            </div> 
            <div class="form-group"> 
              <select class="input-md form-control" id="sel2"> 
                <option>Выберите объем баллона</option> 
                <option value="11275">Баллон (Метан) 50 л (219*1640) мм</option> 
                <option value="29055">Баллон (Метан) 100 л( 425*1000) мм</option> 
                <option value="25876">Баллон (Метан) 90 л (425*940) мм</option> 
                <option value="4310">Баллон 100 л (400*912)</option> 
                <option value="4240">Баллон цилиндрический 100 л (399*895)</option> 
                <option value="4240">Баллон 103 л (356*1110) </option> 
                <option value="4100">Баллон 105 л (376*1064)</option> 
                <option value="4360">Баллон 130 л (399*1144) </option> 
                <option value="4590">Баллон 130 л (400*1165)</option> 
                <option value="7550">Баллон цилиндрический 200 л (498*1136) </option> 
                <option value="2070">Баллон цилиндрический 35 л (241*880)</option> 
                <option value="2520">Баллон цилиндрический 50 л (299*798) </option> 
                <option value="2460">Баллон цилиндрический 50 л (300*796)</option> 
                <option value="3240">Баллон цилиндрический 51 л (356*600) </option> 
                <option value="2770">Баллон цилиндрический 60 л (299*948) </option> 
                <option value="2630">Баллон цилиндрический 60 л (300*945)</option> 
                <option value="3070">Баллон цилиндрический 60 л (315*863) </option> 
                <option value="3000">Баллон цилиндрический 60 л (315*866)</option> 
                <option value="2840">Баллон цилиндрический 65 л (299*1023) </option> 
                <option value="4150">Баллон цилиндрический 80 л (356*900) </option> 
                <option value="3520">Баллон тор внешняя горловина 42 л НЗГА (600*200)</option> 
                <option value="5900">Баллон тор внешняя горловина 50 л (650*200) </option> 
                <option value="4100">Баллон тор внешняя горловина 54 л НЗГА (630*220)</option> 
                <option value="4710">Баллон тор внешняя горловина 60 л (630*250)</option> 
                <option value="7550">Баллон тор внешняя горловина 62 л (720*210) </option> 
                <option value="7500">Баллон тор внешняя горловина 74 л (720*230) </option> 
                <option value="7900">Баллон тор внешняя горловина 81 л (720*250) </option> 
                <option value="8350">Баллон тор внешняя горловина 98 л НЗГА (720*300)</option> 
                <option value="3540">Баллон тор внутр. горловина 42 л НЗГА (600*200)</option> 
                <option value="3990">Баллон тор внутр. горловина 47 л (600*220) </option> 
                <option value="3730">Баллон тор внутр. горловина 53 л (630*225) </option> 
                <option value="6620">Баллон тор внутр. горловина 54 л НЗГА (720*180)</option> 
                <option value="6210">Баллон тор внутр. горловина 55 л (650*225) </option> 
                <option value="8100">Баллон тор полнотелый 85 л (720*250) </option> 
                <option value="8300">Баллон тор полнотелый 93 л (720*270) </option> 
                <option value="8300">Баллон тор полнотелый 94 л (720*270) </option> 
              </select> 
            </div> 
          </div> 
          <div class="cf-right-col"> 
            <div class="form-group"> 
              <!-- <select multiple class="form-control" id="sel3"> 
                                                                    <option value="300">ВЗУ</option> 
                                                                    <option value="1000">Сенсор уровня газа</option> 
                                                                    <option value="1500">Евромультиклапан</option> 
                                                                    <option value="1500">Обтяжка карпетом</option> 
                                                                    <option value="500">Доп фильтр тонкой очистки</option> 
                                                                </select>--> 
 
              <label class="checkbox-inline"> 
                                                                    <input type="checkbox" id="inlineCheckbox1"  name="cname" value="300">1 
                                                                </label> 
              <label class="checkbox-inline"> 
                                                                    <input type="checkbox" id="inlineCheckbox2" name="cname" value="300">2 
                                                                </label> 
              <label class="checkbox-inline"> 
                                                                    <input type="checkbox" id="inlineCheckbox3" name="cname" value="300">3 
                                                                </label> 
 
            </div> 
            <div class="form-tip pt-20"> 
              <i class="fa fa-info-circle"></i> Для множественного выбора зажмите клавишу CTRL 
            </div> 
          </div> 
          <div class="cf-left-col"> 
 
          </div> 
          <div class="cf-left-col"> 
            <!-- Пробег --> 
            <!-- bensin --> 
          </div> 
 
        </div> 
        <div class="section-text align-center mb-20 mb-xs-40" id="ekonomia"> 
 
        </div> 
        <div class="clearfix"> 
          <div class="cf-left-col"> 
            <!-- Inform Tip --> 
 
 
          </div> 
 
        </div> 
 
 
 
        <div class="section-text align-center mb-70 mb-xs-40" id="result_cum"> 
 
        </div> 
      </form> 
 
 
 
      <div id="subscribe-result"></div> 
 
    </div> 
  </div> 
</form>

Answer 1

Код нужно чистить и чистить, но вот думаю так для начала вам подойдет, объединяйте пересчет всех данных при изменении.

function GetData() { 
  let sum = 0; 
 
  var s = $('select'); 
  s.each(function() { 
    sum += Number(this.value) || 0; 
  }); 
 
  $("input:checked").each(function() { 
    sum += Number($(this).val()); 
  }); 
 
  document.getElementById('result_cum').innerHTML = "Примерная стоимость установки: " + sum; 
 
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form class="form align-center" id="col_form_name" method="POST" name="ccol_form_name" onchange='GetData()'> 
  <div class="row"> 
    <div class="col-md-8 col-md-offset-2"> 
 
      <div class="newsletter-label font-alt"> 
        Расчет стоимости ГБО 
      </div> 
      <div class="section-text align-center mb-70 mb-xs-40"> 
        Узнайте примерную стоимость установки ГБО 
      </div> 
      <form action="" class="form contact-form" id="col_form_name" method="POST" name="col_form_name" OnChange='GetData()'> 
        <div class="clearfix"> 
          <div class="cf-left-col"> 
            <div class="form-group"> 
              <select class="input-md form-control" id="sel"> 
                <option>Выберите количество цилиндров</option> 
                <option>4 цилиндра</option> 
                <option>6 цилиндров</option> 
                <option>8 цилиндров</option> 
                <option>ГАЗель</option> 
              </select> 
 
            </div> 
            <div class="form-group"> 
              <select class="input-md form-control" id="sel1"> 
                <option>Выберите оборудование</option> 
                <!--4 цилиндра--> 
                <option value="13000">OMVL SAVER-4 (Италия) - Лидер продаж в РФ</option> 
                <option value="11700">Digitronic – (Польша)</option> 
                <option value="7000">Atiker (Турция) – бюджетный комплет оборудования</option> 
                <option value="12400">BRC- (Италия), Оборудование премиум класса)</option> 
                <!--end 4 цилиндра--> 
                <!--6 цилиндра--> 
                <option value="17500">OMVL -6 (Италия), Лидер продаж в РФ</option> 
                <option value="20800">OMVL -6 OBD (Италия) , Премиум линейка</option> 
                <option value="28400">BRC- (Италия), Оборудование премиум класса</option> 
                <!--8 цилиндра--> 
                <option value="23000">OMVL -8 OBD (Италия) - Премиум линейка</option> 
                <option value="33600">BRC- (Италия), Оборудование премиум класса</option> 
              </select> 
            </div> 
            <div class="form-group"> 
              <select class="input-md form-control" id="sel2"> 
                <option>Выберите объем баллона</option> 
                <option value="11275">Баллон (Метан) 50 л (219*1640) мм</option> 
                <option value="29055">Баллон (Метан) 100 л( 425*1000) мм</option> 
                <option value="25876">Баллон (Метан) 90 л (425*940) мм</option> 
                <option value="4310">Баллон 100 л (400*912)</option> 
                <option value="4240">Баллон цилиндрический 100 л (399*895)</option> 
                <option value="4240">Баллон 103 л (356*1110) </option> 
                <option value="4100">Баллон 105 л (376*1064)</option> 
                <option value="4360">Баллон 130 л (399*1144) </option> 
                <option value="4590">Баллон 130 л (400*1165)</option> 
                <option value="7550">Баллон цилиндрический 200 л (498*1136) </option> 
                <option value="2070">Баллон цилиндрический 35 л (241*880)</option> 
                <option value="2520">Баллон цилиндрический 50 л (299*798) </option> 
                <option value="2460">Баллон цилиндрический 50 л (300*796)</option> 
                <option value="3240">Баллон цилиндрический 51 л (356*600) </option> 
                <option value="2770">Баллон цилиндрический 60 л (299*948) </option> 
                <option value="2630">Баллон цилиндрический 60 л (300*945)</option> 
                <option value="3070">Баллон цилиндрический 60 л (315*863) </option> 
                <option value="3000">Баллон цилиндрический 60 л (315*866)</option> 
                <option value="2840">Баллон цилиндрический 65 л (299*1023) </option> 
                <option value="4150">Баллон цилиндрический 80 л (356*900) </option> 
                <option value="3520">Баллон тор внешняя горловина 42 л НЗГА (600*200)</option> 
                <option value="5900">Баллон тор внешняя горловина 50 л (650*200) </option> 
                <option value="4100">Баллон тор внешняя горловина 54 л НЗГА (630*220)</option> 
                <option value="4710">Баллон тор внешняя горловина 60 л (630*250)</option> 
                <option value="7550">Баллон тор внешняя горловина 62 л (720*210) </option> 
                <option value="7500">Баллон тор внешняя горловина 74 л (720*230) </option> 
                <option value="7900">Баллон тор внешняя горловина 81 л (720*250) </option> 
                <option value="8350">Баллон тор внешняя горловина 98 л НЗГА (720*300)</option> 
                <option value="3540">Баллон тор внутр. горловина 42 л НЗГА (600*200)</option> 
                <option value="3990">Баллон тор внутр. горловина 47 л (600*220) </option> 
                <option value="3730">Баллон тор внутр. горловина 53 л (630*225) </option> 
                <option value="6620">Баллон тор внутр. горловина 54 л НЗГА (720*180)</option> 
                <option value="6210">Баллон тор внутр. горловина 55 л (650*225) </option> 
                <option value="8100">Баллон тор полнотелый 85 л (720*250) </option> 
                <option value="8300">Баллон тор полнотелый 93 л (720*270) </option> 
                <option value="8300">Баллон тор полнотелый 94 л (720*270) </option> 
              </select> 
            </div> 
          </div> 
          <div class="cf-right-col"> 
            <div class="form-group"> 
              <!-- <select multiple class="form-control" id="sel3"> 
                                                                    <option value="300">ВЗУ</option> 
                                                                    <option value="1000">Сенсор уровня газа</option> 
                                                                    <option value="1500">Евромультиклапан</option> 
                                                                    <option value="1500">Обтяжка карпетом</option> 
                                                                    <option value="500">Доп фильтр тонкой очистки</option> 
                                                                </select>--> 
 
              <label class="checkbox-inline"> 
                                                                    <input type="checkbox" id="inlineCheckbox1"  name="cname" value="300">1 
                                                                </label> 
              <label class="checkbox-inline"> 
                                                                    <input type="checkbox" id="inlineCheckbox2" name="cname" value="300">2 
                                                                </label> 
              <label class="checkbox-inline"> 
                                                                    <input type="checkbox" id="inlineCheckbox3" name="cname" value="300">3 
                                                                </label> 
 
            </div> 
            <div class="form-tip pt-20"> 
              <i class="fa fa-info-circle"></i> Для множественного выбора зажмите клавишу CTRL 
            </div> 
          </div> 
          <div class="cf-left-col"> 
 
          </div> 
          <div class="cf-left-col"> 
            <!-- Пробег --> 
            <!-- bensin --> 
          </div> 
 
        </div> 
        <div class="section-text align-center mb-20 mb-xs-40" id="ekonomia"> 
 
        </div> 
        <div class="clearfix"> 
          <div class="cf-left-col"> 
            <!-- Inform Tip --> 
 
 
          </div> 
 
        </div> 
 
 
 
        <div class="section-text align-center mb-70 mb-xs-40" id="result_cum"> 
 
        </div> 
      </form> 
 
 
 
      <div id="subscribe-result"></div> 
 
    </div> 
  </div> 
</form>

READ ALSO
Преобразование строки в JSON через JSON.parse

Преобразование строки в JSON через JSON.parse

Я получаю с сервера экранированную строку в виде:

221
Как сделать блок некликабельным

Как сделать блок некликабельным

Есть скрипт выпадающего блока, проблема в том, если его открыть, то он закрывается по любому клику (не важно кликните вы по открывшимся блоке...

377
Передача данных между элементами React

Передача данных между элементами React

Пытаюсь разобраться, как передавать данные между siblings-компонентамиИдея такая: нужно сделать так, чтоб класс active был только у одного child-компонента...

175