Калькулятор с select

134
12 января 2019, 09:10

Вопрос: как вычислять по выбранному селекту?

$('#obs, #visotp, #etagey, .factors, #mainresult').bind('input', calcAndShow); 
 
function calcAndShow() { 
  var v1 = parseFloat($("#obs").val()); 
  var v2 = parseFloat($("#visotp").val()); 
  var v3 = parseFloat($("#etagey").val()); 
  var v4 = parseFloat($('input[name="stena[]"]:checked').val()); 
  var v5 = $('#mainresult'); 
  var text, text2, summa, text3; 
  text = 'Цена от:'; 
  text2 = v1 * v2 * v3 * v4; 
  text3 = 'руб.' 
  if (text2 === text2) { 
 
  } else { 
 
    return 0; 
  } 
 
  var res = (text2 + '').replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '); 
  summa = text + ' ' + res + ' ' + text3; 
  $('#mainresults').val(summa); 
 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form action="" method="post" class=" ajax_form" id="maincals" enctype="multipart/form-data"> 
  <div class="row"> 
 
    <div class="col-12 col-md-5 lfts"> 
      <div class="row"> 
        <div class="col-12 col-md-6 frmss"> 
          <label for="obs">Общая площадь дома</label> 
          <input type="text" name="obs" id="obs" value="" data="Цена От"> 
          <span class="sup">м<sup>2</sup></span> 
        </div> 
        <div class="col-12 col-md-6 frmss"> 
          <div class="selects"> 
            <select name="visota" id="visotp"> 
              <option disabled="" selected="">Высота потолков</option> 
              <option value="1">2,4 метра</option> 
              <option value="1,06">2,7 метра</option> 
              <option value="1,12">3 метра</option> 
              <option value="1,18">3,3 метра</option> 
            </select> 
          </div> 
          <div class="selects frmss"> 
            <select name="etagey" id="etagey"> 
              <option disabled="" selected="">Кол-во этажей</option> 
              <option value="1,15">Один</option> 
              <option value="1">Два</option> 
              <option value="1">Три</option> 
            </select> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="col-12 col-md-7 rightcalc"> 
      <div class="row"> 
        <div class="col-12 col-md-7"> 
          <span class="title"><span>Стены</span></span> 
          <div class="row"> 
            <input type="hidden" name="stena[]" value=""> 
            <div class="col-12 col-md-6 rad"> 
              <div class="radiob"> 
 
                <input type="radio" class="factors" name="stena[]" value="15000" id="stena1"> 
                <label for="stena1" class="radios">Кирпич</label> 
              </div> 
            </div> 
            <div class="col-12 col-md-6 rad"> 
              <div class="radiob"> 
 
                <input type="radio" class="factors" name="stena[]" value="14000" id="stena2"> 
                <label for="stena2" class="radios">Газоблок</label> 
              </div> 
            </div> 
            <div class="col-12 col-md-6 rad"> 
              <div class="radiob"> 
 
                <input type="radio" class="factors" name="stena[]" value="12000" id="stena3"> 
                <label for="stena3" class="radios">Деревянный каркас</label> 
              </div> 
            </div> 
            <div class="col-12 col-md-6 rad"> 
              <div class="radiob"> 
 
                <input type="radio" class="factors" name="stena[]" value="13000" id="stena4"> 
                <label for="stena4" class="radios">Блоки эконом</label> 
              </div> 
            </div> 
          </div> 
        </div> 
        <div class="col-12 col-md-5 result"> 
          <span class="title">Стоимость Вашего дома:</span> 
 
          <input type="text" name="result" id="mainresults" value=""> 
          <a href="#" class="resbtn" data-toggle="modal" data-target="#form2">Получить подробный расчет</a> 
        </div> 
      </div> 
    </div> 
 
  </div>

Answer 1

Как бы и так почти всё работало... Подправил немного.

$('#maincals').on('change input', calcAndShow); 
function calcAndShow() { 
  var v1 = parseFloat($("#obs").val()); 
  var v2 = parseFloat($("#visotp").val()); 
  var v3 = parseFloat($("#etagey").val()); 
  var v4 = parseFloat($('input[name="stena[]"]:checked').val()); 
  var v5 = $('#mainresult'); 
  var text, text2, summa, text3; 
  text = 'Цена от:'; 
  text2 = v1 * v2 * v3 * v4 + 0.00001; 
  text3 = 'руб.' 
  if (text2 === text2) {} else { 
    return 0; 
  } 
  var res = (text2.toFixed(2)).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '); 
  summa = text + ' ' + res + ' ' + text3; 
  $('#mainresults').val(summa); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form action="" method="post" class=" ajax_form" id="maincals" enctype="multipart/form-data"> 
  <div class="row"> 
    <div class="col-12 col-md-5 lfts"> 
      <div class="row"> 
        <div class="col-12 col-md-6 frmss"> 
          <label for="obs">Общая площадь дома</label> 
          <input type="text" name="obs" id="obs" value="" data="Цена От"> 
          <span class="sup">м<sup>2</sup></span> 
        </div> 
        <div class="col-12 col-md-6 frmss"> 
          <div class="selects"> 
            <select name="visota" id="visotp"> 
              <option disabled selected>Высота потолков</option> 
              <option value="1">2,4 метра</option> 
              <option value="1.06">2,7 метра</option> 
              <option value="1.12">3 метра</option> 
              <option value="1.18">3,3 метра</option> 
            </select> 
          </div> 
          <div class="selects frmss"> 
            <select name="etagey" id="etagey"> 
              <option disabled selected>Кол-во этажей</option> 
              <option value="1.15">Один</option> 
              <option value="1">Два</option> 
              <option value="1">Три</option> 
            </select> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="col-12 col-md-7 rightcalc"> 
      <div class="row"> 
        <div class="col-12 col-md-7"> 
          <span class="title"><span>Стены</span></span> 
          <div class="row"> 
            <input type="hidden" name="stena[]" value=""> 
            <div class="col-12 col-md-6 rad"> 
              <div class="radiob"> 
                <input type="radio" class="factors" name="stena[]" value="15000" id="stena1" checked> 
                <label for="stena1" class="radios">Кирпич</label> 
              </div> 
            </div> 
            <div class="col-12 col-md-6 rad"> 
              <div class="radiob"> 
                <input type="radio" class="factors" name="stena[]" value="14000" id="stena2"> 
                <label for="stena2" class="radios">Газоблок</label> 
              </div> 
            </div> 
            <div class="col-12 col-md-6 rad"> 
              <div class="radiob"> 
 
                <input type="radio" class="factors" name="stena[]" value="12000" id="stena3"> 
                <label for="stena3" class="radios">Деревянный каркас</label> 
              </div> 
            </div> 
            <div class="col-12 col-md-6 rad"> 
              <div class="radiob"> 
                <input type="radio" class="factors" name="stena[]" value="13000" id="stena4"> 
                <label for="stena4" class="radios">Блоки эконом</label> 
              </div> 
            </div> 
          </div> 
        </div> 
        <div class="col-12 col-md-5 result"> 
          <span class="title">Стоимость Вашего дома:</span> 
          <input type="text" name="result" id="mainresults" value=""> 
          <a href="#" class="resbtn" data-toggle="modal" data-target="#form2">Получить подробный расчет</a> 
        </div> 
      </div> 
    </div> 
  </div>

READ ALSO
Как подключить jquery плагин galereya?

Как подключить jquery плагин galereya?

Нужна помощь, хочу на сайте для галереи с фотографиями использовать этот плагинАльтернатив не нашел и хочу использовать именно его

150
Не правильная работа animate jquery

Не правильная работа animate jquery

Существует проблема анимирования объектаУ объекта изменяется его ширина с помощью

123
Разница между 2-мя датами

Разница между 2-мя датами

Как я могу получить разницу между 2 датами в формате MM/dd/yyyy HH:mm:ss?

146
Как осуществить выборку из текста? [дубликат]

Как осуществить выборку из текста? [дубликат]

На данный вопрос уже ответили:

145