sauna

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="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 col-sm-6">
		<input name="door_size_h" type="text" class="form-control">
		<label for="door_size_h">Высота, мм</label>
	</div>

	<div class="row" style="width:100%;"></div>


<div class="result col-xs-12 col-sm-6"><h4>Итоговая спецификация</h4>
Размер дверной коробки (в миллиметрах): <span class="razmer"></span><br />
<br />Стоимость двери: <span class="price"></span>
</div>
  
</form>

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();
  });



  function calculation() {
    if ($('input[name="door_size_radio"]:checked').val() == 'standard') 
    {var BasePrice  =  $(".standard_sizes option:selected").data('price') * 1;}
  else 
    {var BasePrice  =  100 % $('input[name="door_size_b"]').val() + $('input[name="door_size_h"]').val() ;}

    var total = BasePrice;
    $('.result').children('.price').html( total );
    return false;
    };
});