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

Тема в разделе "JavaScript", создана пользователем biper, 4 апр 2018.

  1. biper

    biper

    Регистрация:
    27 окт 2016
    Сообщения:
    2
    Симпатии:
    1
    в форме размещения объявления пытаюсь вывести

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

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

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

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


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

    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">Адрес Вашей электронной почты  (например "[email protected]")</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">Наберите текст объявления,- так, как он должен будет выглядеть в газете (для экономии денег :Smile:
            возможны сокращения. Обязательно укажите контактный телефон (который может отличаться от указанного выше.) Например "Мет. двери, реш., ворота. Т. 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>
     
    Lasted edited by : 4 апр 2018