sauna

by schel4ok

HTML

<h4 class="title"><i class="fa fa-shopping-cart fa-lg text-primary"></i>  Заказать стеклянную дверь для сауны</h4>
<div class="text-primary">* обязательное поле</div>


<form role="form" class="go-right calculator" action="" method='post' enctype="multipart/form-data">

	<input name="calc" type="hidden" value="sauna">


	<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="col-xs-6 standard_sizes"><h4>Стандартные размеры дверной коробки</h4></div>
	<div class="col-xs-6 standard_sizes"><div class="custom-dropdown custom-dropdown--white">
		<select class="standard_sizes custom-dropdown__select custom-dropdown__select--white"> 
			<option value="585х1880" data-price="5600" selected="selected">585х1880</option>
			<option value="685x1880" data-price="3600">685x1880</option>
			<option value="685x1980" data-price="5600">685x1980</option>
			<option value="685x2080" data-price="5600">685x2080</option>
			<option value="685x2180" data-price="6600">685x2180</option>
			<option value="785x1880" data-price="5600">785x1880</option>
			<option value="785x1980" data-price="5600">785x1980</option>
			<option value="785x2080" data-price="5600">785x2080</option>
			<option value="785x2180" data-price="6600">785x2180</option>
		</select>
	</div></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">
		<label for="door_size_b">Ширина, мм</label>
	</div>

	<div class="form-group special_sizes col-xs-12...

JavaScript

$(document).ready(function () {

  $('input[name="door_size_radio"]').change(function () {
    if ($(this).val() == 'standard') {
        $('.standard_sizes').show();
        $('.special_sizes').hide();
        $('.standard_sizes').attr("required", true);
        $('.special_sizes').attr("required", false);
        $('.result > .razmer').html($('.standard_sizes option:selected').html());
        calculation();
    }
    else {
        $('.special_sizes').show();
        $('.standard_sizes').hide();
        $('.standard_sizes').attr("required", false);
        $('.special_sizes').attr("required", true);
        $('.result > .razmer').html($('input[name="door_size_b"]').val() +'x'+ $('input[name="door_size_h"]').val());
        calculation();
    }
  });


  $('.standard_sizes').change(function () {
    $('.result').children('.razmer').html($('.standard_sizes option:selected').val());
    calculation();
  });

  $('input[name="door_size_b"]').change(function () {
    $('.result').children('.razmer').html($(this).val() +'x'+ $('input[name="door_size_h"]').val());
    calculation();
  });

  $('input[name="door_size_h"]').change(function () {
    $('.result').children('.razmer').html($('input[name="door_size_b"]').val() +'x'+ $(this).val());
    calculation();
  });

  $('.glass').change(function () {
    $('.result').children('.glass').html($(this).val());
    calculation();
  });

  $('.korobka').change(function () {
    $('.result').children('.korobka').html($(this).val());
    calculation();
  });

  $('.petli').change(function () {
    $('.result').children('.petli').html($(this).val());
    calculation();
  });

  $('.dekor').change(function () {
    $('.result').children('.dekor').html($(this).val());
    calculation();
  });

  $('input[name="dostavka"]').change(function () {
    if ( $(this).is(":checked") ) {
      $('.result').children('.dostavka').html($(this).val());
      calculation();    
    }
    else {
     ...