Neocaridina
@Neocaridina
спину выпрями!

Как при изменении инпута в форме выводить сразу же результат вычисления?

Например
<label>Выберите тип
<select id="PROD">
<option value="1000">Мини</option>
<option value="2000">Оптим</option>
<option value="3000">Макси</option>
</select>
</label>
<label>Количество: <input id="COUNT" type="number"></label>
<p>Результат: <b id="RESULT"></p>

Как вывести результат умножения PROD на COUNT в RESULT при помощи КНОПКИ знаю (нагуглил)
А как выводить результат динамически, чтоб он менялся сразу же при переключении опции или изменении цифры?
Буду благодарен за пример или хотябы ссылку
  • Вопрос задан
  • 160 просмотров
Решения вопроса 2
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
вешаешь на событие onchange селекта вместо onclick кнопки
Ответ написан
С JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>Выберите тип
<select id="PROD">
<option value="1000">Мини</option>
<option value="2000">Оптим</option>
<option value="3000">Макси</option>
</select>
</label>
<label>Количество: <input id="COUNT" type="number"></label>
<p>Результат: <b id="RESULT"></p>

$( function()
{
  $('#PROD').bind('change', change )
  $('#COUNT').bind('change', change )  
});

function change()
{
  var type = $( '#PROD option:selected' ).val();
  var count = $( '#COUNT' ).val();
  $( '#RESULT' ).text( count * type );
}

То-же самое, но покороче:
$( function()
{
  $('#PROD, #COUNT').bind('change', 
    function() {
      $( '#RESULT' ).text( $( '#PROD option:selected' ).val() * $( '#COUNT' ).val() );
              })
});

Можно на чистом JavaScript. Будет длиннее, но смысл не изменится.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы