Как в коде заменить событие change на input

163

30 октября 2019, 03:50

Есть форма:

<input id="weight" name="weight">
<input type="checkbox" value="1" id="doc">
<select id="dist" name="dist" class="form-control">
    <option value="in_city">В городе</option>
    <option value="0_49">От города меньше 50 км </option>
    <option value="50_200">От города 50-200 км</option>
    <option value="200_999">От города больше 200 км</option>
</select>
<input id="final_price" name="final_price" readonly>

JavaScript

$(document).ready(function(){
    $('.calc-form').change(function(){
        $dist = $('select#dist').val();
        $weight = $('input#weight').val();
        $sum = {
            "document":{
                "0.3":{"in_city":"1600","0_49":"2200","50_200":"3200","200_999":"4200"},
                "0.5":{"in_city":"2000","0_49":"2400","50_200":"3400","200_999":"4400"},
                "1":{"in_city":"2400","0_49":"2700","50_200":"3700","200_999":"4700"},
                "1.5":{"in_city":"2600","0_49":"3000","50_200":"4000","200_999":"5000"},
                "2":{"in_city":"2800","0_49":"3500","50_200":"4500","200_999":"5500"}
            },
            "no_document":{
                "0.5":{"in_city":"2100","0_49":"2400","50_200":"3400","200_999":"4400"},
                "1":{"in_city":"2450","0_49":"2700","50_200":"3700","200_999":"4700"},
                "1.5":{"in_city":"2650","0_49":"3000","50_200":"4000","200_999":"5000"},
                "2":{"in_city":"2850","0_49":"3500","50_200":"4500","200_999":"5500"}
            }
        };
        //Проверка документ ли или нет
        if( $("#doc").prop('checked') ){
            var item = Object.keys($sum.document).map(item => +item).sort().find(key => key >= $weight);
            $('input#final_price').val($sum.document[item][$dist]);
        } else {
            var item = Object.keys($sum.no_document).map(item => +item).sort().find(key => key >= $weight);
            $('input#final_price').val($sum.no_document[item][$dist]);
        }
    })
});

Вопрос как сделать так что бы при вводе в поле вес, final_price менялся мгновенно.

Answer 1

Ну во первых для таких целей есть такие фреймворки как Vue, React, Angular: (пример Vue)

new Vue({ 
  el: '#app', 
  data: {'amount': 10} 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="app"> 
  <input type="number" v-model="amount"/> 
  Final price: {{amount*30}} <!-- тут можно любую формулу--> 
</div>

Нативное решение - использовать событие input

document.getElementById("inp").addEventListener("input", function(e) 
{ 
  document.getElementById("price").innerHTML = document.getElementById("inp").value; 
});

<input id="inp" type="number" value="0"> 
Full price: <span id="price">0</span>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как понять определение px на примере iPhone 5?

1 px по определению в css это 1/96 inchВ описании(возможно не самый надежный источник) ширины экрана(не корпуса) у iPhone 5 = 1

183

javascript

AJAX ЖИВОЙ ПОИСК undefined

Подскажите, пожалуйста, как вывести в классsearch-result все фамилии в которых есть совпадения

157

javascript

Конфликт с вложенными div и js

Извините за вопрос, но я в CSS полный нольЕсть страница с div и js

147

javascript

Canvas анимация чрезмерно нагружает ноутбук

Есть паттерн как задний фон, который медленно отклоняется при движении мышиЧтобы не рисовать каждый раз паттерн я сделал некий буфер, в котором...

165