Форум

schel4ok · #1 (**permalink**) 16.03.2016, 00:59

здравствуйте, товарищи

никак не могу сделать онлайн калькулятор для сайта.
код, который вроде должен работать, как всегда работать не хочет.
что-то, видимо, делаю не так

вот код
https://jsfiddle.net/schel4ok/p9d1p00t/

Я хочу, чтобы по умолчанию части формы .standard_sizes и .special_sizes были спрятаны и появлялись только при нажатии на соответствующий селектор.
На jsfiddle вообще ничего не работает, выкладываю просто для удобства представления кода.
У меня на локалке работает частично. При нажатии на любой из вариантов radio всегда отображается вариант standard

Подскажите, пожалуйста, что не так.

Dilettante_Pro · #2 (**permalink**) 16.03.2016, 11:52

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>

schel4ok · #3 (**permalink**) 18.03.2016, 19:53

спасибо! так работает

schel4ok · #4 (**permalink**) 18.03.2016, 20:27

еще один вопрос
не получается сделать так, чтобы при нажатии на любой элемент формы сразу происходил перерасчет значения

<!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>

Форум

Справочник

Discord чат

Курсы javascript