online calculator

by xylab

HTML

<script src="https://cdn.rawgit.com/imsky/holder/master/holder.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
для сайта hand-rails.ru
<h2 class="title" style="margin-left:10px;">Заказать лестницу</h2>

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

	<div class="form-group door_size_radio col-xs-12 col-sm-6"><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" style="float:right;" 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-12" 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-12" 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 погонных...

CSS

input[type="radio"]{
    visibility:hidden;
}

.calculator .form-group select {
  cursor: pointer;
  }
  
.calculator .form-group label {
  cursor: pointer;
  display: block;
  padding: 5px 10px;
  background-color:#ccc;
  color:#777;
}

.form-group2 {
  margin-top: 6px;
}

#sample1 {
  background:url(?holder.js/170x132?bg=3276b1&text=картинка-1) no-repeat;
  margin-left:5px;
  margin-top:18px;
  display: inline-block;
  }
#sample2 {
  background:url(?holder.js/170x132?bg=3276b1&text=картинка-2) no-repeat;
  margin-left:5px;
  margin-top:18px;
  display: inline-block;
  }
#sample3 {
  background:url(?holder.js/170x132?bg=3276b1&text=картинка-3) no-repeat;
  margin-left:5px;
  margin-top:18px;
  display: inline-block;
  }
  
.holderjs {
    height:132px;
    width:170px;
}

.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:#3276b1;
  color:#fff;
}

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

$(document).change(function () {
 if ($('input[name="poruch"]:checked').val() == 'clear') {
$( "#sample1" ).css( "display", "inline-block" );
$( "#sample2" ).css( "display", "none" );
$( "#sample3" ).css( "display", "none" );
}
 else if ($('input[name="poruch"]:checked').val() == 'matelux') {
$( "#sample1"...