<div class="item-views blocks row maxwidth-theme">
<div class="col-md-6">
<p>Заполните поля калькулятора.</p>
<form action="" id="ajax_form" method="post">
<div class="row">
<div class="form-group">
<div class="pb-10 col-md-12">
<a id="inner_area"></a>
<label>Внутреняя площадь дома, м2</label>
<input type="number" class="form-control" name="inner_area" id="area">
</div>
<div class="pb-10 col-md-12">
<label>Количество этажей</label>
<select class="form-control" name="floors" id="floors">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">1+мансарда</option>
</select>
</div>
<div class="pb-10 licence_block bx_filter col-md-12">
<input type="checkbox" name="garage" id="garage" onclick="validate('#garage', '#garage_area')">
<label for="garage">Гараж</label>
</div>
<div id="garage_area" class="hide pb-10 col-md-12">
<label>Площадь гаража</label>
<input type="number" class="form-control" name="garage_area">
</div>
<div class="pb-10 licence_block bx_filter col-md-12">
<input type="checkbox" name="aux_prem" id="aux_prem" onclick="validate('#aux_prem', '#aux_prem_area')">
<label for="aux_prem">Вспомогательные помещения</label>
</div>
<div id="aux_prem_area" class="hide pb-10 col-md-12">
<label>Площадь вспомогательных помещений (крыльцо, терасса)</label>
<input type="number" class="form-control" name="aux_prem_area">
</div>
<div class="pb-10 licence_block bx_filter col-md-12">
<input type="checkbox" name="roof" id="roof">
<label for="roof">Кровля крыльца/террасы</label>
</div>
<div class="pb-10 col-md-12">
<label>Кровля крыльца/террасы</label>
<select class="form-control" name="roof_pt" id="roof_pt" disabled></select>
</div>
<div class="pb-10 col-md-12">
<a id="wall_mat_mess"></a>
<label>Материал стен</label>
<select class="form-control" name="wall_mat" id="wall_mat" onchange="getOption()">
<option value="0"></option>
<option value="1">Газобетон без отделки</option>
<option value="2">Газобетон с отделкой фасада декоративной штукатуркой</option>
<option value="3">Керамический блок с облицовочным кирпичем</option>
</select>
</div>
<div class="pb-10 col-md-12">
<label>Материал кровли</label>
<select class="form-control" name="roof_mat" id="roof_mat">
<option value="0"></option>
<option value="1">Металлочерепица (Металлопрофиль)</option>
<option value="2">Гибкая черепица (Технониколь)</option>
</select>
</div>
<div class="pb-10 col-md-12">
<!--input type="checkbox" value="" maxlength="100" name="mounting" id="mounting"-->
<label for="mounting">Установка окон/дверей</label>
<a>В подарок!</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="button" value="Отправить" id="btn" class="btn btn-default btn-lg" data-loading-text="Loading...">
</div>
</div>
</form>
</div>
<div id="result_form" class="col-md-6"></div>
</div>
<script>
const area = document.querySelector('#area')
const floors = document.querySelector('#floors')
area.addEventListener('change', refresh)
floors.addEventListener('change', refresh)
function refresh() {
var value = area.value
const notify = function(mess) {
document.getElementById('inner_area').innerHTML = mess;
}
const twoFloors = (floors.value == 2)
if (value > 300) {
notify("Дома рассчитываются индивидуально!<br>");
value = 300;
} else if (twoFloors && value < 120) {
notify("Дома рассчитываются индивидуально!<br>");
value = 120;
} else if (value < 90) {
notify("Дома рассчитываются индивидуально!<br>");
value = 90;
} else {
notify("")
}
area.value = value;
}
function validate(cbid, divid) {
if ($(cbid).is(':checked')) {
$(divid).removeClass('hide');
} else {
$(divid).addClass('hide');
}
}
function getOption() {
const notify = function(mess) {
document.getElementById('wall_mat_mess').innerHTML = mess;
}
var selected = $("#wall_mat").val();
if (selected == 3) {
notify("Обратите внимание, при выборе строительстве дома с облицовкой - размеры дома увеличиваются, так как наружная стена становится толще на 125мм.<br>");
} else { notify(""); }
}
$( document ).ready(function() {
$("body").on("change", "#roof_mat", function() {
let donor = $(this);
$("#roof_pt")
.html("")
.append(donor.find('[value="' + donor.val() + '"]').clone())
.val(donor.val());
});
$("#btn").click(
function(){
var wallmat = $("#wall_mat").val();
if (floors.value == 1) {
AC1 = 1;
if (area.value <= 120) AC1 = 1.26;
else if (area.value <= 140) AC1 = 1.24;
else if (area.value <= 160) AC1 = 1.23;
else if (area.value <= 200) AC1 = 1.22;
else if (area.value <= 260) AC1 = 1.2;
else if (area.value <= 300) AC1 = 1.19;
MWC1 = 1;
if (wallmat == 1) {
if (area.value < 200) MWC1 = 1.04;
else if (area.value >= 200) MWC1 = 1.02;
}
} else if (floors.value == 2 || floors.value == 3) {
AC2 = 1; // ? для меньше 100
if (area.value >= 100 && area.value <= 130) AC2 = 1.3;
else if (area.value <= 160) AC2 = 1.27;
else if (area.value <= 200) AC2 = 1.24;
else if (area.value <= 300) AC2 = 1.22;
MWC2 = 1;
if (wallmat == 1) {
if (area.value < 200) MWC2 = 1.06;
else if (area.value >= 200) MWC2 = 1.04;
}
}
}
);
});
</script>
Простой
Простой
