небольшая работа по JS - доделать форму размещения (подсчет стоимости)

[biper]

в форме размещения объявления пытаюсь вывести

1. количество знаков в объявлении,
2. стоимость одного объявления (= стоимости одного знака, в зависимости от выбранного типа объявления * количество знаков), 
3. общую сумму заказа (= количество публикаций (выбирается из календаря) * стоимость одного объявления -
скидка в 7% если выбрано 4 или более публикаций) 
4. Размер скидки в рублях (= 7% от суммы заказа)

количество знаков подсчитывает, в отдельный див вывел без труда... есть уже календарь, который даты публикации передает...  Дальше почему то затык...что делаю не так? не могу посчитать и вывести ....
5. Кроме того, нужно в поле «Текст объявления», заполняемого пользователем… выводить внешний вид
объявления –  т. е.  Class для div внешний вид для текста объявления, набираемого пользователем в
соответствующем поле должен меняться в зависимости от выбранного типа объявления. Т.е. если выбран тип выделение полем, то текст должен с помощью стиля отображаться с фоновым цветом вокруг текста, если выбран тип «в рамке» - текст должен отображаться внутри рамки

Окончательно расписался в собственной безграмотности и готов оплатить работу знающего человека. Оплата по факту на карточку или еще куда. Интересует на этом этапе  цена вопроса 

Саму страничку можно посмотреть по адресу http://modx.biper3fo.bget.ru/prajs-list.htmlна вкладке "РАЗМЕЩЕНИЕ СТРОЧНЫХ ОБЪЯВЛЕНИЙ"

код странички - все вместе, со скриптом..

 

<div id="respond">

<form method="post" action="[~[*id*]~]">

<input type="hidden" name="formid" value="contact-form" />

<img src="/image/shadow.png" alt="тень" "width="100%" ">

<h2>электронная форма размещения объявлений</h2><hr>

<p><b>Для уточнения возникших у Вас вопросов и для консультации Вы можете связаться с сотрудником редакции по многоканальному телефону, указанному в шапке сайта или воспользоваться офлайн контактной формой "Перезвоним" в правом нижнем углу экрана</b></p>

<hr>

    <div class="col-sm-6">

        <p><label accesskey="n" for="name">Ваше имя (например "Александр Иванов")</label>

    </div>

    <div class="col-sm-6">

       <input type="text" name="name" size="50%" maxlength="100%" eform="Имя::1" /></p>

    </div>

    <div class="col-sm-6">

       <p><label accesskey="e" for="email">Адрес Вашей электронной почты  (например "post@mail.ru")</label>

    </div>

    <div class="col-sm-6">

       <input type="text" name="email" size="50%" maxlength="100%" eform="Адрес электронной почты:email:1" /></p>

    </div>

    <div class="col-sm-6">

       <p><label accesskey="p" for="phone">Ваш мобильный телефон (на сайте не публикуется). Необходим для того, чтобы идентифицировать Ваш заказ. Этот же номер Вам понадобится при оплате услуги на терминале. (например "8 929 001 22 34")</label>

    </div>

    <div class="col-sm-6">

       <input type="text" name="phone" size="50%" maxlength="100%" eform="Ваш мобильный телефон::1" /></p>

    </div>

    <div class="col-sm-6">

        <p><label accesskey="s" for="otdel">Выберите раздел газеты</label>

    </div>

    <div class="col-sm-6">

        <select name="otdel" >


        <option value="&&& Недвижимость">Объявление в раздел Недвижимость</option>

        <option value="&&& Дачное строительство">Объявление в раздел Дачное строительство</option>

        <option value="&&& Ремонт квартир">Объявление в раздел Ремонт квартир</option>

        <option value="&&& Балконы, окна">Объявление в раздел Балконы, окна</option>

        <option value="&&&Электротехнические работы">Объявление в раздел Электротехнические работы </option>

        <option value="&&& Сантехника">Объявление в раздел Сантехника</option>

        <option value="&&& Двери, металлоконструкции">Объявление в раздел Двери, металлоконструкции</option>

        <option value="&&& Замки">Объявление в раздел Замки</option>

        <option value="&&& Межкомнатные двери">Объявление в раздел Межкомнатные двери</option>

        <option value="&&& Мебель, интерьер">Объявление в раздел Мебель, интерьер</option>

        <option value="&&& Ремонт бытовой техники">Объявление в раздел Ремонт бытовой техники</option>

        <option value="&&& Ремонт компьютеров">Объявление в раздел Ремонт компьютеров</option>

        <option value="&&& Ремонт телевизоров">Объявление в раздел Ремонт телевизоров</option>

        <option value="&&& Антенны">Объявление в раздел Антенны</option>

        <option value="&&& Грузоперевозки">Объявление в раздел Грузоперевозки</option>

        <option value="&&& Куплю">Объявление в раздел Куплю</option>

        <option value="&&& Продаю">Объявление в раздел Продаю </option>

        <option value="&&& Займы">Объявление в раздел Займы</option>

        <option value="&&& Разное">Объявление в раздел Разное</option>

        <option value="&&& Ветеринарные услуги">Объявление в раздел Ветеринарные услуги</option>

        <option value="&&& Ритуальные услуги">Объявление в раздел Ритуальные услуги</option>

        <option value="&&& Брачные знакомства">Объявление в раздел Брачные знакомства</option>

        <option value="&&& Магия">Объявление в раздел Магия</option>

        <option value="&&& Вакансии">Объявление в раздел Вакансии</option>

        <option value="&&& Услуги автомобилистам">Объявление в раздел Услуги автомобилистам</option>

        <option value="&&& Выкуп авто">Объявление в раздел Выкуп авто</option>

        <option value="&&& Химчистка">Объявление в раздел Химчистка</option>

        <option value="&&& Клининг">Объявление в раздел Клининг</option>

        <option value="&&& Вывоз мусора">Объявление в раздел Вывоз мусора</option>

        <option value="&&& Дезинсекция">Объявление в раздел Дезинсекция</option>

        <option value="&&& Организация праздника">Объявление в раздел Организация праздника</option>

        <option value="&&& Салон красоты">Объявление в раздел Салон красоты</option>

        <option value="&&& Арена Путешествий">Объявление в раздел Арена Путешествий</option>

        </select></p>


    </div>

    <div class="col-sm-6">

    <label accesskey="t" for="type">Выберите тип публикации</type>

        <select name="type" id="type" onchange="changePrice()">

            <option value="без выделения">без выделения</option>

            <option value="выделение фоном">с фоном</option>

            <option value="объявление в рамке">в рамке</option>

        </select>

    </label>

    </div>

    <div class="col-sm-6">

        <p><label accesskey="c" for="comments">Наберите текст объявления,- так, как он должен будет выглядеть в газете (для экономии денег :) 

        возможны сокращения. Обязательно укажите контактный телефон (который может отличаться от указанного выше.) Например "Мет. двери, реш., ворота. Т. 414-74-66")</label>

        <br/></p>

       <h2>Ваше объявление в газете будет выглядеть так:</h2> 

<!--в поле «Текст объявления», заполняемого пользователем… нужно выводить внешний вид объявления –  т. е. текст, введенный 

пользователем в поле «текст объявления» должен отображаться с тем оформлением CSS-стиля который задан полем «тип выделения 

публикации»-->

        <div class="(type_aa)" style="font-size: 14px; color:gray;"> 


        <textarea cols="50" rows="10" name="comments" eform="Текст объявления:html:1" onkeyup="symbols(this)" onkeydown="symbols(this)" onkeyup="changePrice()" 

        onkeydown="changePrice()" id="textarea"></textarea></p>

        </div>     


<!-- количество знаков в объявлении -->

           <div id="symbols"></div> 

<!--стоимость одной публикации объявления в рублях (-->

           <div id="price">Стоимость одной публикации объявления в рублях</div> 

<!-- общая стоимость заказа  в рублях -->           

            <div id="resultat">Стоимость заказа в рублях</div> 

<!-- скидка в рублях -->

           <div id="skidka">Размер скидки в рублях</div>     

<div> 






</div> 

    </div> 

    <div class="col-sm-6">


<!--    дата публикации должна отображаться под конкретные даты корректировка. Должен выводить календарную сетку на текущий год, начиная с текущего месяца, 

        На календарной сетке отображается выделением дата выхода номера газеты. Сии дни обычно приравнены к среде, потому может проще добавить условие - 

        исключения, когда в определенные указанные дни даты переносятся-->     


        <p><label accesskey="dat" for="dat">Дата выхода номера газеты, в котором Вы можете разместить свое объявление - среда, выделена в календаре подчеркиванием. 

        Окончание приема рекламы в номер - 15-00 вторника той же недели. Выберите в календаре желаемую дату выхода (можно выбрать несколько номеров, при этом 

        автоматически просчитанную стоимость Вашего объявления нужно будет умножить на количество публикаций)

        </label></p>


    </div>

    <div class="col-sm-6">

        <input type="text" name="dat" size="50%" maxlength="100%" eform="Дата публикации::1" id="dt"/></p>

    </div>

    <div class="col-sm-12">[[calendar]]</div>

    <img src="/image/shadow.png" alt="тень" "width="100%" ">

    <div class="col-sm-12">

        <div class="col-sm-3">

            <p><input type="submit" name="submit" id="submit" class="btn btn-primary" value="Разместить объявление"></p>

        </div>

        <div class="col-sm-6">

            <p><i>Нажимая на кнопку "Разместить объявление", Вы подтверждаете согласие с правилами, указанными в разделе 

            <a href="http://arena-rv.ru/politika-konfidenczialnosti-sajta-arena.html">"Политика конфиденциальности сайта "Арена"</a> и даете согласие на обработку персональных данных, переданных 

            Вами при размещении Вашего объявления</i></p>

        </div>    

    </div>

</form>

<script type="text/javascript">

     function symbols() {

      var symbols = textarea.value.length;

      document.getElementById('symbols').innerHTML =

      'В Вашем объявлении <span class="red" style="font-size: 14px; color:red;">' + symbols + '</span> знаков.';

      }


     function changePrice() {

      var price = document.getElementById('price');

      var textarea = document.getElementById('textarea');

      var pricei = document.getElementById('pricei');

      var resultat = document.getElementById('resultat');

      var skidka = document.getElementById('skidka');


        if(type.value == 'простое') cena = 18;

        else if(type.value == 'с фоном') cena = 19;

        else cena = 24;


        price.innerHTML = cena * textarea.value.length;

        pricei.value = cena * textarea.value.length;



        document.getElementById('price').innerHTML =

      'стоимость одной публикации' + price + 'руб.';




     }


    var dt = document.getElementById('dt');


    function setDate(d){

     dt.value += (dt.value == '') ? d : ', '+d;

    }

    function init() {

        if (arguments.callee.done) return;

        arguments.callee.done = true;

        changePrice();

     }


    // ff, opera

    if (document.addEventListener) {

        document.addEventListener("DOMContentLoaded", init, false);

     }


    // ie

    /*@cc_on @*/

    /*@if (@_win32)

    document.write("<script id=__ie_onload defer src=javascript:void(0)>");

    document.write("<\/script>");

    var script = document.getElementById("__ie_onload");

    script.onreadystatechange = function() {

        if (this.readyState == "complete") {

            init();

     }

    };

    /*@end @*/


    // safari

    if (/WebKit/i.test(navigator.userAgent)) {

        var _timer = setInterval(function() {

            if (/loaded|complete/.test(document.readyState)) {

                clearInterval(_timer);

                delete _timer;

                init();

         }

        }, 10);

    }


    // others

    window.onload = init;


</script>

 

[pichs_up]

Если все еще нужна помощь, доведу до ума, пиши на почту: question@pichs.ru