Калькулятор расчета стоимости натяжных потолков на jQuery

В этой статье мы сделаем простой калькулятор на jQuery.
Дело в том, что часто сталкиваясь с нетривиальными задачами в веб-разработке, Вас могут попросить сделать калькулятор на сайт. К сожалению, сделать это при помощи чистого html и css не представляется возможным, как бы этого сильно не хотелось, и поэтому используются скрипты.

Писать наш скрипт калькулятора мы будем на примере «расчета стоимости натяжных потолков». Вот так выглядит калькулятор «в живую».

Рассчет стоимости потолка
Площадь потолка м2
Фактура
Общее количество углов шт.
Установка люстры шт.
Установка встраиваемого светильника шт.
Обход трубы, уходящей в потолок шт.
Примерная стоимость: 0 руб.

Готовая HTML разметка

<div class="price">
  <div class="title">Рассчет стоимости потолка</div>
	<div id="calculator" class="calculator">
	<table>
		<colgroup>
			<col width="70%"/>
			<col width="30%"/>
		</colgroup>
		<tr class="required">
			<td>Площадь потолка</td>
			<td><input name="area" type="text" value="10"/></td>
			<td>м<sup>2</sup></td>
		</tr>
		<tr class="required">
			<td>Фактура</td>
			<td colspan="2">
				<select name="texture">
					<option value="mat">Матовый</option>
					<option value="glossy">Глянцевый</option>
					<option value="satin">Сатиновый</option>
					<option value="fabric">Тканевый</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>Общее количество углов</td>
			<td><input name="corners" type="text" value="4"/></td>
			<td>шт.</td>
		</tr>
		<tr>
			<td>Установка люстры</td>
			<td><input name="chandelier-hook" type="text" value=""/></td>
			<td>шт.</td>
		</tr>
		<tr>
			<td>Установка встраиваемого светильника</td>
			<td><input name="lamp" type="text" value=""/></td>
			<td>шт.</td>
		</tr>
		<tr>
			<td>Обход трубы, уходящей в потолок</td>
			<td><input name="tube" type="text" value=""/></td>
			<td>шт.</td>
		</tr>
	</table>

	<div class="total">
	Примерная стоимость: <span class="total">0 руб.</span>
	</div>
	</div>
</div>

Оформление калькулятора

.price&#123;
	padding: 20px 20px 0px 20px;
    min-height: 200px;
    border-radius: 5px;
    max-width: 660px;
    border: 5px solid #fff200;
	background:#f9f9f9;
&#125;
.calc_title&#123;
	font-size: 28px;
	color: #ee1d25;
	margin: 0 0 20px;
&#125;
.result&#123;
	padding: 20px 0 0;
    margin: 20px 0;
    font-size: 24px;
    border-top: 1px solid #e0e0e0;
&#125;
span.total&#123;
	color: #ed1d25;
&#125;
.calculator input&#91;type="text"&#93;, select &#123;
	padding: 5px 10px;
    border: 1px solid #ccc;
	margin-right: 10px;
    margin-bottom: 10px;
&#125;

Готовый скрипт калькулятора расчета стоимости натяжных потолков

(function ($) {
  $(function () {

		calculate();

		jQuery('#calculator input').keyup(function() {
			this.value = this.value.replace(/[^0-9\.,]/g, '');
			this.value = this.value.replace(/[,]/, '.');
		});
		jQuery('#calculator input, #calculator select').change(function() {
			calculate();
		});
		jQuery('#calculator input').keyup(function() {
			calculate();
		});
		function calculate() {
      $('.calculator').each(function(key, val){
        calcInputs = {};
  			$(this).find('input, select').each(function(key, val){
  				name = $(this).attr('name');
  				val = $(this).val();
  				if (!$.isNumeric(val)) {
  					switch (name) {
  						case 'area':
  							val = 1;
  							break;
  						case 'corners':
  							val = 4;
  							break;
  						case 'lamp':
  							val = '';
  							break;
  						case 'tube':
  							val = '';
  							break;
  						case 'chandelier-hook':
  							val = '';
  							break;
  						default:
  							break;
  					}
  					$(this).val(val);
  				}
  				calcInputs[name] = val;
  			});

  			total = 0;

  			switch (calcInputs.texture) {
  				case 'mat':
            total += calcInputs.area * 113;
            break;
  				case 'glossy':
            total += calcInputs.area * 180;
            break;
  				case 'satin':
            total += calcInputs.area * 180;
            break;
  				case 'fabric':
            total += calcInputs.area * 900;
            break;
            default:
  			break;
  			}

  			// каждый угол
				total += calcInputs.corners * 40;

  			// установка люстры
  			if (calcInputs['chandelier-hook'] >= 1) {
  				total += calcInputs['chandelier-hook'] * 500;
  			}
  			// установка встраемого светильника
  			if (calcInputs.lamp >= 1) {
  				total += calcInputs.lamp * 350;
  			}
  			// обход трубы
  			if (calcInputs.tube >= 1) {
  				total += calcInputs.tube * 300;
  			}

        install = calcInputs.area * 170;
        total += install;

  			total += ' руб.';
  			jQuery(this).find('span.total').html(total);
      });
		}

	});
})(jQuery);
;