проблема с формой
здравствуйте, товарищи
никак не могу сделать онлайн калькулятор для сайта. код, который вроде должен работать, как всегда работать не хочет. что-то, видимо, делаю не так вот код https://jsfiddle.net/schel4ok/p9d1p00t/ Я хочу, чтобы по умолчанию части формы .standard_sizes и .special_sizes были спрятаны и появлялись только при нажатии на соответствующий селектор. На jsfiddle вообще ничего не работает, выкладываю просто для удобства представления кода. У меня на локалке работает частично. При нажатии на любой из вариантов radio всегда отображается вариант standard Подскажите, пожалуйста, что не так. |
schel4ok,
<!DOCTYPE html>
<html>
<head>
<title>Doors</title>
<style>
form#calculator {
.form-group {position: relative; display:block; width: 50%;
> input.radio {height:13px; margin:6px 0 0 3px; width:13px;}
> label.radio {clear:both; margin:-1.75em 0 0 25px; padding:4px 0 5px; width:90%;}
> select {width:95px;}
> input.text {position: relative; }
> label.text {position: relative; padding: 0px; margin: 0px;}
}
}
.standard_sizes, .special_sizes {display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".radio").change(function () {
if ($(this).val() == 'standard') {
$('#log').html("Новый текст " + $(this).val());
$('.standard_sizes').show();
$('.special_sizes').hide();
}
else {
$('#log').html("Новый текст " + $(this).val());
$('.special_sizes').show();
$('.standard_sizes').hide();
}
});
});
</script>
</head>
<body>
<form role="form" class="" id="calculator" action="" method='post' enctype="multipart/form-data">
<div class="form-group pull-left" id="door_size_radio"><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 pull-right standard_sizes" id="door_size_standard"><h4>Стандартные размеры дверной коробки</h4>
<select class="select" name="door_size_standard">
<option value="1" selected="selected">585х1880</option>
<option value="2" >685x1880</option>
<option value="3" >685x1980</option>
<option value="4" >685x2080</option>
<option value="5" >685x2180</option>
<option value="6" >785x1880</option>
<option value="7" >785x1980</option>
<option value="8" >785x2080</option>
<option value="9" >785x2180</option>
</select>
</div>
<div class="form-group pull-right special_sizes" id="door_size_special"><h4>Ввести свои размеры дверной коробки</h4>
<label for="door_size_b" class="text">Ширина, мм</label>
<input name="door_size_b" type="text" class="text">
<label for="door_size_h" class="text">Высота, мм</label>
<input name="door_size_h" type="text" class="text">
</div>
<div class="form-group">
<input id="name" name="name" type="text" class="form-control" required>
<label for="name">Ваше имя *</label>
</div>
<div class="form-group">
<input id="phone" name="phone" type="tel" class="form-control" required>
<label for="phone">Номер телефона *</label>
</div>
<div class="form-group">
<input id="time" name="time" type="text" class="form-control" required>
<label for="time">Желательное время звонка</label>
</div>
<div class="form-group">
<input id="email" name="email" type="email" class="form-control" required>
<label for="email">Адрес электронной почты *</label>
</div>
<div class="form-group">
<textarea id="message" name="phone" class="form-control" required></textarea>
<label for="message">Сообщение *</label>
</div>
<div class="footer">
<button type="submit" class="btn btn-primary pull-right">Отправить</button>
</div>
<div id="log"></div>
</form>
</body>
</html>
|
спасибо! так работает
|
еще один вопрос
не получается сделать так, чтобы при нажатии на любой элемент формы сразу происходил перерасчет значения <!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>
|
| Часовой пояс GMT +3, время: 07:03. |