1

Здравствуйте, нужна помощь в 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>

1
  • Зачем <option value="0">Выбрать</option>? Поставьте "Обычный" с коэффициентом 1. Просто не используйте new Number. $('#predel_goroda:checked').prop('checked') - проверка типа "если выбранный флажок является выбранным".
    – br3t
    12 июн 2017 в 20:52

1 ответ 1

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. И после него сделайте с ним то что вы задумали.

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

2
  • Спасибо Вам, поменял в своём коде. Но теперь отказываеться вообще подсчитывать стоимость. 12 июн 2017 в 20:04
  • @CaptainHemp вот я обновил ответ, там теперь ваш код целиком, и оно нормально работает после тех изменений который я сделал и вчера ответил на вопрос. 13 июн 2017 в 5:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.