Как корректно сделать калькулятор для расчета стоимости?

Question

[ndemic]

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

<div class="calc">
	<h2>Рассчет стоимости</h2>
	<label for="bathType">Тип узла</label><br>
	<select class="form-control" name="bathType" id="bathType">
        <option value="0">Выберите тип</option>
		<option value="1">Только туалет</option>
		<option value="2">Только ванная</option>
		<option value="3">Совмещенный</option>
		<option value="4">Раздельный</option>
	</select>
	<br>
	<label>Площадь санузла</label>
    <label class="alt hidden">Туалет</label>
	<input class="form-control" type="text" id="width" value="Ширина (см)" onfocus="if (this.value == 'Ширина (см)') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Ширина (см)';}">
    <input class="form-control" type="text" id="length" value="Длинна (см)" onfocus="if (this.value == 'Длинна (см)') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Длинна (см)';}">
	<label class="alt hidden">Ванная</label>
    <input class="form-control hidden" type="text" id="alt-width" value="Ширина (см)" onfocus="if (this.value == 'Ширина (см)') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Ширина (см)';}">
    <input class="form-control hidden" type="text" id="alt-length" value="Длинна (см)" onfocus="if (this.value == 'Длинна (см)') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Длинна (см)';}">
    <br>
	<label for="style">Стиль ремонта</label>
	<select name="style" id="style" class="form-control">
		<option value="0">Выберите стиль</option>
        <option value="1">Классик</option>
		<option value="2">Техно</option>
		<option value="3">Лофт</option>
	</select>
	<br>
	<h4>
		<small>Приблизительная</small> <br>
		Стоимость 
	</h4>
	<p class="price">
		<span id="final_price">0</span>
		Руб.
	</p>
</div>

$(document).ready(function(){
	$('.calc select').change(function(){
        $price = null;
        $bathPrice = null;
        $toiletPrice = null;
		$bathType = $('select#bathType').val();
        $width = parseInt(document.getElementById("width").value, 10);
        $length = parseInt(document.getElementById("length").value, 10);
        $altWidth = parseInt(document.getElementById("alt-width").value, 10);
        $altLength = parseInt(document.getElementById("alt-length").value, 10);
        $style = $('select#style').val();
        $S = $width * $length;
        $S2 = $altWidth * $altLength;

	  if($bathType === "1"){
            if($S <= 5000) {
            $price = 10000;
          } else if($S > 5000 && $S <= 6400 ) {
            $price = 20000;
          } else if($S > 6400) {
            $price = 30000;
          } else {
            $price = 0;
          }
        } else if($bathType === "2") {
            if($S <= 15625) {
            $price = 15000;
          } else if($S > 15625 && $S <= 22500 ) {
            $price = 25000;
          } else if($S > 22500) {
            $price = 35000;
          } else {
            $price = 0;
          }
        } else if($bathType === "3"){
            if($S <= 32400) {
            $price = 40000;
          } else if($S > 32400 && $S <= 40000 ) {
            $price = 50000;
          } else if($S > 40000) {
            $price = 60000;
          } else {
            $price = 0;
          }
        } 
        if($bathType === "4"){
            $("label.alt").removeClass("hidden").addClass("visible");
            $("#alt-width").removeClass("hidden");
            $("#alt-length").removeClass("hidden");
            if($S <= 5000) {
            $toiletPrice = 10000;
          } else if($S > 5000 && $S <= 6400 ) {
            $toiletPrice = 20000;
          } else if($S > 6400) {
            $toiletPrice = 30000;
          }
          if($S2 <= 15625) {
            $bathPrice = 15000;
          } else if($S2 > 15625 && $S2 <= 22500 ) {
            $bathPrice = 25000;
          } else if($S2 > 22500) {
            $bathPrice = 35000;
          }
          $price = $toiletPrice + $bathPrice;
        } else {
            $("label.alt").addClass("hidden").removeClass("visible");
            $("#alt-width").addClass("hidden");
            $("#alt-length").addClass("hidden");
        }
        if ($style === "1" && $bathType !== "4"){
            $price = $price + 0;
        } else if ($style === "2" && $bathType !== "4"){
            $price = $price + 1000;
        } else if ($style === "3" && $bathType !== "4") {
            $price = $price + 2000;
        } else if ($style === "1" && $bathType === "4") {
            $price = $price + 0;
        } else if ($style === "2" && $bathType === "4") {
            $price = $price + 2000;
        } else if ($style === "3" && $bathType === "4") {
            $price = $price + 4000;
        }
        console.log($price);
        $('span#final_price').text($price);
	})
})

Answer 1

[Максим Тимофеев]

Надо сделать функцию, которая производит расчет и выводит результат. При любом изменении поля, вызывать ее.