online calculator

by xylab

HTML

<h2 class="title"><i class="fa fa-shopping-cart fa-lg text-primary"></i>Заказать лестницу</h2>


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

	<div class="form-group door_size_radio col-xs-12 col-sm-6" style="margin-bottom:36px;"><h4>Лестница для</h4>
		<input type="radio" value="standard" name="door_size_radio" class="radio" id="door_size_radio" text="Сталь AISI 201 для помещения" checked="checked">
		<label for="door_size_radio" class="radio" style="float:left;">помещения</label>

		<input type="radio" value="special" name="door_size_radio" class="radio" id="door_size_radio2"  text="Сталь AISI 304 для улицы">
		<label for="door_size_radio2" class="radio" style="float:left; margin-left:4px;">улицы</label>
	</div>

	<div class="form-group standard_sizes col-xs-12 col-sm-6" id="standard_sizes"><h4>Выберите количество погонных метров для помещения</h4>
		<select class="select door_size_standard" name="door_size_standard"> 
			<option value="1" data-price="2900" selected="selected">От 60 погонных метров</option>
			<option value="2" data-price="3100">От 25 до 60 погонных метров</option>
			<option value="3" data-price="3300">От 6 до 25 погонных метров</option>
			<option value="4" data-price="18000">До 6 погонных метров</option>
		</select>
	</div>

	<div class="form-group special_sizes col-xs-12 col-sm-6" style="display:none;"><h4>Выберите количество погонных метров для улицы</h4>	
		<select class="select door_size_b" name="door_size_b"> 
<option value="1" data-price="3100" selected="selected">От 60 погонных метров</option>
			<option value="2" data-price="3300">От 25 до 60 погонных метров</option>
			<option value="3" data-price="3500">От 6 до 25 погонных метров</option>
			<option value="4" data-price="22000">До 6 погонных метров</option>
		</select>
	</div>



	<div class="form-group glass col-xs-12 col-sm-6"><h4>Вид леснтчного ограждения</h4>

		<input type="radio" value="clear" data-price="0"...

CSS

input[type="radio"]{
    visibility:hidden;
}
.calculator .form-group label {
  cursor: pointer;
  display:block;
  padding: 5px 5px;
  background-color:#ccc;
}

.calculator #door_size_radio:checked + label, .calculator #door_size_radio2:checked + label, .calculator #poruch:checked + label, .calculator #poruch2:checked + label, .calculator #poruch3:checked + label {
  background-color:#fff;
}


.calculator 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;}

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;
		> span {font-weight: bold}

	}

	@media (max-width: @screen-sm) {
	 .form-group {width: 100%;}
	}

}

JavaScript

$(document).ready(function () {


  $('input[name="door_size_radio"]').change(function () {
    if ($(this).val() == 'standard') {
        $('.standard_sizes').show();
        $('.special_sizes').hide();
        $('.result > .razmer').html($('.door_size_standard option:selected').html());
        calculation();
    }
    else {
        $('.special_sizes').show();
        $('.standard_sizes').hide();
        $('.result > .razmer').html($('.door_size_b option:selected').html());
        calculation();
    }
  });

   $(document).change(function () { 
     if ($('#standard_sizes').is(':visible')) { 
     $('.result > .razmer').html($('.door_size_standard option:selected').html());
    calculation();
    }
      else {
      $('.result > .razmer').html($('.door_size_b option:selected').html());
    calculation();
    }
  });
  
  


  $('input[name="poruch"]').change(function () {
    $('.result > .poruch').html($(this).attr('text'));
    calculation();
  });
  
    $('input[name="door_size_radio"]').change(function () {
    $('.result > .door_size_radio').html($(this).attr('text'));
  });

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

    var PoruchPrice  = $("input[name='poruch']:checked").data('price') * BasePrice; 

    var total = BasePrice + PoruchPrice;
    ext = Math.round((total) / 100) * 100;
    $('.result > .price').html( ext );
		return false;
    };

  //$('.calculator').on('click keyup', calculation);
});