Калькулятор стоимости проекта

270
14 июня 2017, 00:22

Здравствуйте, нужна помощь в 2-х вопроса относительно работы калькулятора подсчета стоимости услуг:

  1. Не считывает значение value из radiobutton'a в функцию;
  2. Как при вкл/выкл radiobuttona отнимать его value от общей суммы ? Спасибо за ответы и помощь. Код привожу ниже:

        $(document).ready(function(){ 
            $('#itog').click(function(){ 
                var s = new Number($('#ploshad').val()); 
                var k = new Number($('#design option:selected').val()); 
                if($('#visual').prop(':checked')){var dp = new Number($('#visual').val());} 
                else {var dp = 0;} 
                if($('#water').prop(':checked')){var vz = new Number($('#water').val());} 
                else {var vz = 0;} 
                if($('#poliv').is(':checked')){var de = new Number($('#poliv').val());} 
                else {var de = 0;} 
				//var vid = 0; 
				if($('#predel_goroda:checked').prop('checked')) 
					var vid = new Number($('#predel_goroda').val()); 
				if($("#dist_50").checked) 
					vid += 1600;//new Number($('#vid_50').val()); 
 
                var ps = s*(dp + vz + de +vid)*k; 
                if ($('#type_nadzor').is(':checked')){ var os = ps * 1.1;} 
                else{os = ps;} 
                $('#result').text(os); 
            }); 
            $('#reset').click( function(){ 
                $('#result').text('0'); 
            }); 
        }); 
    // Запрет на ввод в поле ввода для площади букв 
        document.getElementById('ploshad').onkeypress = function (e) { 
            return !(/[А-Яа-яA-Za-z ]/.test(String.fromCharCode(e.charCode))); 
        } 
         
    // Ограничение на ввод в поле ввода для площади символов после точки 
        function CharsAfterPoint(e) { 
            if (e.value.indexOf(".") != '-1') { 
                e.value=e.value.substring(0, e.value.indexOf(".") + 3); 
            } 
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<form> 
  <table> 
    <tr> 
      <!--Ploshad'--> 
      <td width="150">Площадь участка</td><br/> 
      <td width="100"><input autofocus type="text" oninput="CharsAfterPoint(this)" placeholder="Площадь в сотках" id="ploshad" maxlength="6" /></td> 
    </tr> 
    <tr> 
      <td width="150">Консультация дизайнера с выездом на участок<br> (анализ территории, фотосъемка, обсуждение планировки, составление задания на проектирование, ситуационного плана) 
      </td> 
      <td width="100"><input name="design" type="radio" value="830" id="predel_goroda" /> 
        <label for="predel_goroda">В пределах города Полтава - 830 грн.</label><br> 
        <input name="design" type="radio" value="1600" id="dist_50" /> 
        <label for="dist_50">В радиусе 50км от города Полтава - 1600 грн.</label><br> 
        <input name="design" type="radio" value="2600" id="dist_oblast" /> 
        <label for="dist_oblast">В пределах области - 2600 грн.</label></td> 
    </tr> 
    <!-- 2design// --> 
    <tr> 
      <td width="150">Стиль ландшафтного дизайна:</td> 
      <td width="100"><select id="design"> 
             <option value="0">Выбрать</option> 
             <option value="1.2">Классический(регулярный)</option> 
             <option value="1.1">Англайский(пейзажный)</option> 
             <option value="1.4">Французский</option> 
             <option value="1.1">Кантри(деревенский)</option> 
             <option value="1.6">Эко-сад</option> 
             <option value="1.9">Японский и восточный</option> 
             <option value="1.6">Мусульманский(исламский)</option> 
             <option value="1.7">Средиземноморский</option> 
             <option value="1.2">Хай-тек</option> 
             <option value="1.5">Модерн(арт-нуво)</option> 
             <option value="1.1">Минимализм</option> 
         </select> 
      </td> 
    </tr> 
 
    <!-- 3project// --> 
    <tr> 
      <td width="150">3D Визуализация </td> 
      <td width="100"><input type="checkbox" value="2450" id="visual" /></td> 
    </tr> 
 
    <!-- 4visual// --> 
 
    <tr> 
      <td width="150">Наличие водоема</td> 
      <td width="100"><input type="checkbox" value="13000" id="water" /></td> 
    </tr> 
 
    <!-- 5decor// --> 
 
    <tr> 
      <td width="150">Планировка и реализация системы полива</td> 
      <td width="100"><input type="checkbox" value="5100" id="poliv" /></td> 
    </tr> 
 
    <!-- 6nadzor// --> 
    <tr> 
      <td width="150">Сопровождение проекта после сдачи в экспллуатацию, срок - 3 года(плановая обрезка деревьев,стрижка газона и тд.)</td> 
      <td width="100"><input type="checkbox" value="1.5" id="nadzor" /></td> 
    </tr> 
 
    <!-- Итого --> 
 
    <tr> 
      <td width="250" class="td_result">Итого:</td> 
      <td class="td_result"><span id="result">0</span> грн.</td> 
    </tr> 
  </table> 
  <input type="button" id="itog" value="Расcчитать итоговую стоимость" /> 
  <input type="reset" id="reset" value="Очистить форму" /> 
</form>

Answer 1

У вас такая проблема, вот 3 radio у вас,и первое вы не считываете значение всех, второе если вам нужно тот который checked надо например дать им один и тот же калсс и взять у них value вот так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
        $('#itog').click(function(){ 
            var s = new Number($('#ploshad').val()); 
            var k = new Number($('#design option:selected').val()); 
            if($('#visual').prop(':checked')){var dp = new Number($('#visual').val());} 
            else {var dp = 0;} 
            if($('#water').prop(':checked')){var vz = new Number($('#water').val());} 
            else {var vz = 0;} 
            if($('#poliv').is(':checked')){var de = new Number($('#poliv').val());} 
            else {var de = 0;} 
             
            var vid = 0; 
            vid = parseInt($('.ploshad:checked').val()); 
 
            var ps = s*(dp + vz + de +vid)*k; 
            if ($('#type_nadzor').is(':checked')){ var os = ps * 1.1;} 
            else{os = ps;} 
            $('#result').text(os); 
        }); 
        $('#reset').click( function(){ 
            $('#result').text('0'); 
        }); 
        // Запрет на ввод в поле ввода для площади букв 
        document.getElementById('ploshad').onkeypress = function (e) { 
            return !(/[А-Яа-яA-Za-z ]/.test(String.fromCharCode(e.charCode))); 
        } 
    }); 
     
         
    // Ограничение на ввод в поле ввода для площади символов после точки 
    function CharsAfterPoint(e) { 
        if (e.value.indexOf(".") != '-1') { 
            e.value=e.value.substring(0, e.value.indexOf(".") + 3); 
        } 
    } 
</script> 
<form> 
  <table> 
    <tr> 
      <!--Ploshad'--> 
      <td width="150">Площадь участка</td><br/> 
      <td width="100"><input autofocus type="text" oninput="CharsAfterPoint(this)" placeholder="Площадь в сотках" id="ploshad" maxlength="6" /></td> 
    </tr> 
    <tr> 
      <td width="150">Консультация дизайнера с выездом на участок<br> (анализ территории, фотосъемка, обсуждение планировки, составление задания на проектирование, ситуационного плана) 
      </td> 
        <td width="100"><input name="design" type="radio"  value="830" id="predel_goroda" class="ploshad"/> 
        <label for="predel_goroda">В пределах города Полтава - 830 грн.</label><br> 
        <input name="design" type="radio"  value="1600" id="dist_50" class="ploshad" /> 
        <label for="dist_50">В радиусе 50км от города Полтава - 1600 грн.</label><br> 
        <input name="design" type="radio"  value="2600" id="dist_oblast" class="ploshad" /> 
        <label for="dist_oblast">В пределах области - 2600 грн.</label></td> 
    </tr> 
    <!-- 2design// --> 
    <tr> 
      <td width="150">Стиль ландшафтного дизайна:</td> 
      <td width="100"><select id="design"> 
             <option value="0">Выбрать</option> 
             <option value="1.2">Классический(регулярный)</option> 
             <option value="1.1">Англайский(пейзажный)</option> 
             <option value="1.4">Французский</option> 
             <option value="1.1">Кантри(деревенский)</option> 
             <option value="1.6">Эко-сад</option> 
             <option value="1.9">Японский и восточный</option> 
             <option value="1.6">Мусульманский(исламский)</option> 
             <option value="1.7">Средиземноморский</option> 
             <option value="1.2">Хай-тек</option> 
             <option value="1.5">Модерн(арт-нуво)</option> 
             <option value="1.1">Минимализм</option> 
         </select> 
      </td> 
    </tr> 
 
    <!-- 3project// --> 
    <tr> 
      <td width="150">3D Визуализация </td> 
      <td width="100"><input type="checkbox" value="2450" id="visual" /></td> 
    </tr> 
 
    <!-- 4visual// --> 
 
    <tr> 
      <td width="150">Наличие водоема</td> 
      <td width="100"><input type="checkbox" value="13000" id="water" /></td> 
    </tr> 
 
    <!-- 5decor// --> 
 
    <tr> 
      <td width="150">Планировка и реализация системы полива</td> 
      <td width="100"><input type="checkbox" value="5100" id="poliv" /></td> 
    </tr> 
 
    <!-- 6nadzor// --> 
    <tr> 
      <td width="150">Сопровождение проекта после сдачи в экспллуатацию, срок - 3 года(плановая обрезка деревьев,стрижка газона и тд.)</td> 
      <td width="100"><input type="checkbox" value="1.5" id="nadzor" /></td> 
    </tr> 
 
    <!-- Итого --> 
 
    <tr> 
      <td width="250" class="td_result">Итого:</td> 
      <td class="td_result"><span id="result">0</span> грн.</td> 
    </tr> 
  </table> 
  <input type="button" id="itog" value="Расcчитать итоговую стоимость" /> 
  <input type="reset" id="reset" value="Очистить форму" /> 
</form>

var vid = 0;
vid = parseInt($('.ploshad:checked').val());

Для того что бы value в input превратить в числовой тип используете метод parseInt. И после него сделайте с ним то что вы задумали.

Как я понял у вас была только эта проблема.

READ ALSO
Visual Studio Code удаленная отладка через ssh

Visual Studio Code удаленная отладка через ssh

Visual Studio Code удаленная отладка через sshИмеется доступ к ubuntu через ssh c windowds машины необходимо редактировать html файлы с подсветкой синтаксиса?...

462
Как добавлять класс css динамически?

Как добавлять класс css динамически?

Есть меню, все элементы которого открываются вправо вниз лесенкойКроме последнего, последний элемент должен открываться вправо вверх

422
Табличное представление данных в windows forms [требует правки]

Табличное представление данных в windows forms [требует правки]

Добрый день! Для решения одной задачи требуется создать таблицу, выбор в одном столбце которой будет происходить из редактируемого списка,...

273