Калькулятор пряжи внешний вид

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<!--<h1>Калькулятор пряжи</h1> -->
<style type="text/css">.buttons.information{display:none}</style>
<h1>Калькулятор пряжи</h1>

<div class="calc_description"><span><strong>Калькулятор расчета пряжи</strong> для популярных вязанных изделий позволяет рассчитать необходимое количество пряжи для вязания в зависимости от используемой в проекте пряжи. Исходными данными для <strong>Калькулятора пряжи</strong> являются: тип изделия, размер изделия, характеристики пряжи - вес или плотность. В результате будет рассчитан метраж пряжи для вязания необходимый для планируемого изделия.</span></div>

<p>&nbsp;</p>

<div class="calc_body">
    <table>
        <tbody>
            <tr>
                <td><span>Ваш проект:</span></td>
                <td><select class="project"><option value="0">Выберите проект</option> </select></td>
            </tr>
            <tr>
                <td><span>Размер изделия:</span></td>
                <td><select class="size"><option value="0">Выберите размер изделия</option> </select></td>
            </tr>
            <tr>
                <td><span>Параметры пряжи:</span></td>
                <td><select class="gauge"><option value="0">Выберите параметры пряжи</option> </select></td>
            </tr>
        </tbody>
    </table>
</div>

<p>&nbsp;</p>

<div id="calc_result" style="display:none;">
    <h2 style="color:red;">Результаты расчета:</h2>

    <p><span style="color:red;"><strong>Внимание. </strong></span><strong>Калькулятор расчета пряжи</strong> использует усредненные данные для конкретной вязаной модели и не учитывает детали Вашего проекта и стиль вязания. <strong>Поэтому рекомендуем увеличить рассчитанные значения на 10%.</strong></p>

    <div id="calc_content">&nbsp;</div>
</div>

<div class="buttons information_2">
    <div class="right" style="position: relative; left: -40%;"><a class="button" href="/pryazha/pryazha_vsya/" style="font-size: 16px; background:#FF6C6C">Пряжа для проекта</a></div>
</div>
<script>$(document).ready(function(){$('.size').prop('disabled', 'disabled'); $('.gauge').prop('disabled', 'disabled'); url = "/catalog/view/theme/shimbashop/yarn_calc/get_yarn_local.php"; var posting = $.post(url, {type:"get_project"}, function(data){var response = jQuery.parseJSON(data); $.each(response, function(k, v){$('.project').append($("<option></option>").attr("value", k).text(v)); }); }); $(".project").change(function(){$("#calc_result").hide(); $("#calc_content").empty(); $('.size').find('option').remove().end().append('<option selected value="0" >Выберите размер изделия</option>'); $('.size option[value=0]').attr('selected', 'selected'); $('.gauge').find('option').remove().end().append('<option selected value="0" >Выберите параметры пряжи</option>'); $('.gauge option[value=0]').attr('selected', 'selected'); $('.gauge').prop('disabled', 'disabled'); url = "/catalog/view/theme/shimbashop/yarn_calc/get_yarn_local.php"; var posting = $.post(url, {type:"get_size", project_id:this.value}, function(data){var response = jQuery.parseJSON(data); $.each(response, function(k, v){$('.size').append($("<option></option>").attr("value", k).text(v)); }); }); if (this.value != 0){$('.size').prop('disabled', false); } else{$('.size').prop('disabled', 'disabled'); $('.gauge').prop('disabled', 'disabled'); }; }); $(".size").change(function(){$("#calc_result").hide(); $("#calc_content").empty(); $('.gauge').find('option').remove().end().append('<option value="0" >Выберите параметры пряжи</option>'); $('.gauge option[value=0]').attr('selected', 'selected'); url = "/catalog/view/theme/shimbashop/yarn_calc/get_yarn_local.php"; var posting = $.post(url, {type:"get_gauge", size_id:this.value, project_id:$(".project").find(":selected").val()}, function(data){var response = jQuery.parseJSON(data); $.each(response, function(k, v){$('.gauge').append($("<option></option>").attr("value", k).text(v)); }); }); if (this.value != 0){$('.gauge').prop('disabled', false); } else{$('.gauge').prop('disabled', 'disabled'); }}); $(".gauge").change(function(){url = "/catalog/view/theme/shimbashop/yarn_calc/get_yarn_local.php"; var posting = $.post(url, {type:"get_calc", gauge_id:this.value, size_id:$(".size").find(":selected").val(), project_id:$(".project").find(":selected").val()}, function(data){$("#calc_content").empty().append(data); }); if (this.value == 0){$("#calc_content").empty(); $("#calc_result").hide(); } else{$("#calc_result").show(); }; }); });</script>  <div class="buttons information">
    <div class="right"><a href="http://shimbashop.ru/" class="button">Продолжить</a></div>
</div>