<form action="">
<div class="col-md-8">
<div class="contact-info-order">
<span>Имя</span>
<input type="text" placeholder="Ваше имя:">
<span>Телефон</span>
<input type="text" placeholder="+38">
<span>E-mail</span>
<input type="text" placeholder="Email">
</div>
</div>
<div class="col-md-4">
<div class="order-end-form">
<p><b>Сумма заказа</b></p>
<input type="text">
<input class="btn-sale" type="submit" value="Заказать">
</div>
</div>
<div class="col-md-12">
<div class="order-table">
<table>
<tr>
<th>Наименование</th>
<th>Вид</th>
<th>Цена, грн с НДС</th>
</tr>
<tr>
<td><b>НПУ POLYNOR</b><br>
Однокомпонентный напыяемый полиуретановый утеплитель тепло и <br>шумоизоляции объектов. Аэрозольный баллон 890 мл</td>
<td><img src="img/order/ballon.png" alt="НПУ POLYNOR"></td>
<td><span>280,00</span>
<div class="number">
<span style="padding:3px 9px 3px 9px;" class="minus">-</span>
<input type="text" value="0" size="5"/>
<span class="plus">+</span>
</div></td>
</tr>
<tr>
<td><b>Угловая насадка POLYNOR</b><br>Для напыления утеплителя на <br>потолок, пол и в трудодоступных местах.</td>
<td><img src="img/order/nasadka.png" alt="Угловая насадка POLYNOR"></td>
<td><span>30,00</span><div class="number">
<span style="padding:3px 9px 3px 9px;" class="minus">-</span>
<input type="text" value="0" size="5"/>
<span class="plus">+</span>
</div></td>
</tr>
<tr>
<td><b>Пистолет для пены</b><br>
Пистолет для пены из нержавеющей стали рукоятка пластмассовое,<br> сопло из сплава цветных металлов.
</td>
<td><img src="img/order/pistolet.png" alt="Пистолет для пены"></td>
<td><span>304,00</span><div class="number">
<span style="padding:3px 9px 3px 9px;" class="minus">-</span>
<input type="text" value="0" size="5"/>
<span class="plus">+</span>
</div></td>
</tr>
<tr>
<td><b>POLYNOR Cleaner</b><br>Аэрозольное чистящее средство для<br> удаления незатвердевшего утеплитея Polynor,<br> а также монтажной пены с рабочих инструментов и поверхностей.<br>
Аэрозольный баллон 500 мл
</td>
<td><img src="img/order/cleaner.png" alt="POLYNOR Cleaner"></td>
<td width="25%"><span>85,00</span><div class="number">
<span style="padding:3px 9px 3px 9px;" class="minus">-</span>
<input type="text" value="0" size="5"/>
<span class="plus">+</span>
</div></td>
</tr>
<tr>
<td><b>POLYNOR Polyguard</b><br>Готовый к применению водный <br>огнезащитный состав, предназначеный для обработки нанесенного напыляемого утеплителя. переводит материал в негорючее, не <br>воспламеняющее, не поддерживающее горение состояние.<br>
Объем: 1000 мл
</td>
<td><img src="img/order/polyguard.png" alt="POLYNOR Polyguard"></td>
<td><span>292,00</span><div class="number">
<span style="padding:3px 9px 3px 9px;" class="minus">-</span>
<input type="text" value="0" size="5"/>
<span class="plus">+</span>
</div></td>
</tr>
<tr>
<td><b>POLYNOR FIXO</b><br>Теплоизоляционный полиуретановый клей для <br>высококачественной фиксации плит пенополистирола , ППУ и минеральной ваты, при устройстве систем внутренней и наружной теплоизоляции. Под <br>монтажный пистолет.<br>
Аэрозольный баллон 850 мл
</td>
<td><img src="img/order/fixo.png" alt="POLYNOR FIXO"></td>
<td><span>159,00</span><div class="number">
<span style="padding:3px 9px 3px 9px;" class="minus">-</span>
<input type="text" value="0" size="5"/>
<span class="plus">+</span>
</div></td>
</tr>
<tr>
<td><b>POLYNOR STIK</b><br>Теплоизоляционный полиуретановый клей для <br>высококачественной фиксации плит пенополистирола, ППУ и минеральной ваты, при устройстве систем внутренней и наружной теплоизоляции.<br>
Аэрозольный баллон 850 мл
</td>
<td><img src="img/order/stik.png" alt="POLYNOR STIK"></td>
<td><span>157,00</span><div class="number">
<span style="padding:3px 9px 3px 9px;" class="minus">-</span>
<input type="text" value="0" size="5"/>
<span class="plus">+</span>
</div></td>
</tr>
</table>
</div>
</div>
</form>$('.minus').click(function () {
var $input = $(this).parent().find('input');
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$('.plus').click(function () {
var $input = $(this).parent().find('input');
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});
const elMinus = document.querySelectorAll('span.minus');
const elPlus = document.querySelectorAll('span.plus');
const elTotal = document.querySelector('.order-end-form>input');
document.querySelector('.order-table').onclick = function(event) {
if (event.target.className === 'minus') {
if (event.target.nextElementSibling.value <= 0) {
event.target.nextElementSibling.value = 0;
} else {
let val = --event.target.nextElementSibling.value;
let price = parseInt(event.target.closest('.number').previousElementSibling.textContent);
elTotal.value = +elTotal.value - price;
}
}
if (event.target.className === 'plus') {
let val = ++event.target.previousElementSibling.value;
let price = parseInt(event.target.closest('.number').previousElementSibling.textContent);
elTotal.value = +elTotal.value + price;
}
}
function updateSum() {
const sum = $('.order-table .number').get().reduce((acc, n) => {
const price = +$(n).prev().text().replace(',', '.');
const count = +$('input', n).val();
return acc + price * count;
}, 0);
$('.order-end-form input[type="text"]').val(sum.toFixed(2));
}$('.order-table')
.on('click', '.plus, .minus', function() {
const change = $(this).hasClass('plus') ? 1 : -1;
$(this).siblings('input').val((i, val) => Math.max(0, +val + change));
updateSum();
})
.on('input', '.number input', function() {
$(this).val((i, val) => Math.max(0, val | 0));
updateSum();
});