еще один вопрос
не получается сделать так, чтобы при нажатии на любой элемент формы сразу происходил перерасчет значения
<!DOCTYPE html>
<html>
<head>
<title>Doors</title>
<style>
form.calculator {
.form-group {
> input.radio {height:13px; margin:6px 0 0 3px; width:13px;}
> label {padding-left: 15px;}
> label.radio {margin: -23px 0 0 25px; padding:4px 0 5px; right: 0; .transition (none); color: #999;}
> input.radio:focus + label {border-color: #357EBD; background: none; padding: 4px 0 5px; text-transform: none; font-size: 100%; font-weight: bold; color: @link-color;}
> select {width:95px;}
}
.special_sizes {display:none;}
.result {border: 1px solid @link-color;}
@media (max-width: @screen-sm) {
.form-group {width: 100%;}
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
function calculation() {
var BasePrice = $("select option:selected").attr('data-price'); //базовая стоимость за дверь стандартного размера 685х1880 с прозрачным стеклом
var DerevoPrice = $("input[name*='korobka']").attr('data-price');
var GlassPrice = $("input[name*='glass']").attr('data-price');
var PetliPrice = $("input[name*='petli']").attr('data-price');
var DekorPrice = $("input[name*='dekor']").attr('data-price');
var total = BasePrice + DerevoPrice + GlassPrice + PetliPrice + DekorPrice;
$('.result > .price').html($(total));
};
$("input[name*='door_size_radio']").change(function () {
if ($(this).val() == 'standard') {
$('.standard_sizes').show();
$('.special_sizes').hide();
}
else {
$('.special_sizes').show();
$('.standard_sizes').hide();
}
});
//отслеживаем изменение данных
$('.calculator').on('click keyup', calculation);
});
</script>
</head>
<body><form role="form" class="go-right calculator" action="" method='post' enctype="multipart/form-data">
{{ csrf_field() }}
<div class="form-group door_size_radio col-xs-12 col-sm-6" style="margin-bottom:67px;"><h4>Размер дверной коробки (в миллиметрах)</h4>
<input type="radio" value="standard" name="door_size_radio" class="radio">
<label for="door_size_radio" class="radio">Стандартный</label>
<input type="radio" value="special" name="door_size_radio" class="radio">
<label for="door_size_radio" class="radio">Ввести размер</label>
</div>
<div class="form-group standard_sizes col-xs-12 col-sm-6" style="margin-bottom:94.5px;"><h4>Стандартные размеры дверной коробки</h4>
<select class="select door_size_standard" name="door_size_standard">
<option value="1" data-price="7500" selected="selected">585х1880</option>
<option value="2" data-price="6500">685x1880</option>
<option value="3" data-price="7500">685x1980</option>
<option value="4" data-price="7500">685x2080</option>
<option value="5" data-price="7500">685x2180</option>
<option value="6" data-price="7500">785x1880</option>
<option value="7" data-price="7500">785x1980</option>
<option value="8" data-price="7500">785x2080</option>
<option value="9" data-price="8500">785x2180</option>
</select>
</div>
<div class="form-group special_sizes col-xs-12 col-sm-6"><h4>Ввести свои размеры дверной коробки</h4> </div>
<div class="form-group special_sizes col-xs-12 col-sm-6">
<input name="door_size_b" type="text" class="form-control" required>
<label for="door_size_b">Ширина, мм</label>
</div>
<div class="form-group special_sizes col-xs-12 col-sm-6">
<input name="door_size_h" type="text" class="form-control" required>
<label for="door_size_h">Высота, мм</label>
</div>
<div class="row" style="width:100%;"></div>
<div class="form-group glass col-xs-12 col-sm-6"><h4>Стекло</h4>
<input type="radio" value="clear" data-price="1" name="glass" class="radio">
<label for="glass" class="radio">Прозрачное (стандарт)</label>
<input type="radio" value="matelux" data-price="2" name="glass" class="radio">
<label for="glass" class="radio">Матовое</label>
<input type="radio" value="bronza" data-price="3" name="glass" class="radio">
<label for="glass" class="radio">Бронза</label>
<input type="radio" value="bronza_matelux" data-price="4" name="glass" class="radio">
<label for="glass" class="radio">Матовая бронза</label>
</div>
<div class="form-group korobka col-xs-12 col-sm-6"><h4>Материал дверной коробки</h4>
<input type="radio" value="lipa" data-price="1" name="korobka" class="radio">
<label for="korobka" class="radio">Липа (стандарт)</label>
<input type="radio" value="listvennica" data-price="2" name="korobka" class="radio">
<label for="korobka" class="radio">Лиственница</label>
<input type="radio" value="buk" data-price="3" name="korobka" class="radio">
<label for="korobka" class="radio">Бук</label>
<input type="radio" value="dub" data-price="4" name="korobka" class="radio">
<label for="korobka" class="radio">Дуб</label>
</div>
<div class="form-group petli col-xs-12 col-sm-6"><h4>Петли</h4>
<input type="radio" value="chrom" data-price="1" name="petli" class="radio">
<label for="petli" class="radio">Хром (стандарт)</label>
<input type="radio" value="bronza" data-price="2" name="petli" class="radio">
<label for="petli" class="radio">Бронза</label>
<input type="radio" value="gold" data-price="3" name="petli" class="radio">
<label for="petli" class="radio">Золото</label>
</div>
<div class="form-group dekor col-xs-12 col-sm-6"><h4>Декор</h4>
<input type="radio" value="no" data-price="0" name="dekor" class="radio">
<label for="dekor" class="radio">Нет</label>
<input type="radio" value="pesok" data-price="1" name="dekor" class="radio">
<label for="dekor" class="radio">Пескоструйный рисунок</label>
<input type="radio" value="foto" data-price="2" name="dekor" class="radio">
<label for="dekor" class="radio">Фотопечать</label>
<input type="radio" value="fusing" data-price="3" name="dekor" class="radio">
<label for="dekor" class="radio">Пескоструйный рисунок с фьюзингом</label>
</div>
<div class="result col-xs-12 col-sm-6">
Размер дверной коробки (в миллиметрах): <div class="razmer"></div><br />
Стекло: <div class="glass"></div><br />
Материал дверной коробки: <div class="derevo"></div><br />
Петли: <div class="petli"></div><br />
Декор: <div class="dekor"></div><br />
<br />
Стоимость двери: <div class="price"></div>
</div>
<div class="form-group col-xs-12 col-sm-6">
<input id="name" name="name" type="text" class="form-control" required>
<label for="name">Ваше имя *</label>
</div>
<div class="form-group col-xs-12 col-sm-6">
<input id="phone" name="phone" type="tel" class="form-control" required>
<label for="phone">Номер телефона *</label>
</div>
<div class="form-group col-xs-12 col-sm-6">
<input id="email" name="email" type="email" class="form-control" required>
<label for="email">Адрес электронной почты *</label>
</div>
<div class="form-group col-xs-12 col-sm-6">
<textarea id="message" name="phone" class="form-control"></textarea>
<label for="message">Комментарии</label>
</div>
<div class="footer col-xs-12 col-sm-6">
<button type="submit" class="btn btn-primary pull-right">Отправить</button>
</div>
</form>
</body>
</html>