JSFiddle - React, Tailwind, and code Playground

by psics

HTML

<div id="full_calc">
    <form>
        <div id="type_of_site">
            <p>Выберите модификацию</p>
            <p>
                <select id="type_site">
                    <option value='0'>Выберите комплектацию</option>
                    <option value='1'>Attraction бензиновый, VTi 72, МКПП</option>
                    <option value='2'>Tendance бензиновый, VTi 72, МКПП</option>
                    <option value='3'>Tendance бензиновый, 1,6i 115, МКПП</option>
                    <option value='4'>Tendance бензиновый, 1,6i 115, АКПП</option>
                    <option value='5'>Tendance дизельный, HDi 92, МКПП</option>
                    <option value='6'>Exclusive бензиновый, 1,6i 115, МКПП</option>
                    <option value='7'>Exclusive бензиновый, 1,6i 115, АКПП</option>
                    <option value='8'>Exclusive дизельный, HDi 92, МКПП</option>
                </select>
            </p>
        </div>
        <p id="tipus"></p>
        <div id="config_site"></div>
    </form>
</div>
<p id="summ"><strong>Первоначальный взнос: <span></span></strong> грн.</p>
<p id="plateg"><strong>Ежемесячный платеж: <span></span></strong> грн.</p>

CSS

/* CSS Document */
 p {
    margin:2px auto 6px 10px;
    font:12px Arial, Helvetica, sans-serif;
}
table {
    font:12px Arial, Helvetica, sans-serif;
}
#smash {
    margin-left:20px;
}
#full_calc {
    width:780px;
    position:relative;
    overflow:hidden;
}
#type_of_site {
    border:1px gray solid;
    width:600px;
    padding:2px 10px 2px 10px;
}
#option_1, #option_2, #cms_choice {
    display:none;
}
#config_site span {
    font:10px Arial, Helvetica, sans-serif;
}
#design, #programming {
    float:left;
    border:1px gray solid;
    width:350px;
    padding:2px 10px 2px 10px;
    margin-right:10px;
}

JavaScript

// JavaScript Document
$(document).ready(function () {
    $("#type_site").change(function () {
        var typeOfSite = $("#type_site :selected").val(),
            formOftype = $("#config_site");

        /* Обнуляем общую и сумм с НДС в поле вывода */
        $("#summ span").text("0");
        $("#summ_nds span").text("0");

        /* Выбираем соответствующую форму из файла */
        formOftype.load("fullform.php", {
            option: typeOfSite
        });

        /* Выбираем все чекбоксы которые были подгружены, в этом нам поможет функция live */
        formOftype.live("change", function () {

            /* При проведении действий пересчитываем сумму в зависимости от выбраных чекбоксов */
            var totalSum = 0,
                /* Полную сумму сначала приравниваем к нулю */
                totalSumNDS = 0,
                priceAuto = parseInt($("#type_site :selected").val()),
                choiceCMS = parseInt($("#cms_radio :selected").val());



            /* Каждое поле ввода проверяем на введеное значение, если больше нуля то считаем его */
            var perviyVznos = parseInt($("#inputVznos").val());


            if (typeOfSite == 1) {
                var priceAuto = 105000;
            } else if (typeOfSite == 2) {
                var priceAuto = 117700;

            } else if (typeOfSite == 3) {
                var priceAuto = 127400;
            } else if (typeOfSite == 4) {
                var priceAuto = 137200;
            } else if (typeOfSite == 5) {
                var priceAuto = 138400;
            } else if (typeOfSite == 6) {
                var priceAuto = 138800;
            } else if (typeOfSite == 7) {
                var priceAuto = 148600;
            } else if (typeOfSite == 8) {
                var priceAuto = 149800;
            } else {
                alert("Error");
            }
            /* расчет процентов годовых в зависимости от срока кредитования и первоначального взноса  89 250 */
            function...