Отслеживание изменений в input в JQuery

Question

Всем привет! Начинаю потихоньку изучать JavaScript и JQuery. Появилась проблема, которую уже не могу решить несколько часов. Я пишу некое подобие калькулятора, в котором имеются select и input. Я реализовал первую функцию, которая при изменении option:selected меняет общие данные подсчета.

Вопрос: Как мне реализовать функцию, при которой будут высвечиваться изменения после редактирования значений в input?

JS

$(document).ready(function () {
  $("#mat").change(function () {
    const money = [1000, 800, 750];
    const hgt = parseInt(document.getElementById("height1").value);
    const wdt = parseInt(document.getElementById("width1").value);
    var result;
    var opt = $('.form1 option:selected').val();

    if (opt == '0') {
      result = money[0] * (hgt/100 * wdt);
      $('#rezult').text('Цена забора составит: ' + result + ' руб.');
    } else if (opt == '1') {
      result = money[1] * (hgt/100 * wdt);
      $('#rezult').text('Цена забора составит: ' + result + ' руб.');
    } else {
      result = money[2] * (hgt/100 * wdt);
      $('#rezult').text('Цена забора составит: ' + result + ' руб.');
    }
  });
});

HTML:

    <div class="calculator">
      <h1 class="header--text">Калькулятор стоимости забора</h1>

      <form action="" class="form1">
        <select name="" id="mat">
          <option value="0" selected>Дерево</option>
          <option value="1">Металл</option>
          <option value="2">Пластик</option>
        </select><br><br>

        Высота, см.: <input type="number" id="height1" min="50" min="5000"><br><br>
        Длина, м.: <input type="number" id="width1" min="10" min="10000"><br><br>
        <input type="submit" value="Результат" id="btn">
      </form>

      <div id="rezult"></div>
    </div>

Answer 1

Необходимо было указывать всю форму в качестве .change(), а не только select.

 $(".form1").change(function ()

Answer 2

Помимо change, существует событие "input" - которое срабатывает и при изменении select. Поэтому можно отдельно объявить функцию, и добавить обработчик события на все элементы:

$(document).ready(function() {  
  const money = [1000, 800, 750];
  
  const $width = $("#width1");
  const $height = $("#height1");
  const $result = $('#result');
  
  $("#mat, #width1, #height1").on("input", update_result);

  function update_result() {
    const hgt = parseInt( $height.val() );
    const wdt = parseInt( $width.val() );

    let opt = $('.form1 option:selected').val();

    let res = money[opt] * (hgt / 100 * wdt);
    // Цепочка if-else не нужна. Какую строку получили - прямо её и можно использовать,
    // чтобы взять нужное значение money[opt]...

    $result.text('Цена забора составит: ' + res + ' руб.');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="calculator">
  <h1 class="header--text">Калькулятор стоимости забора</h1>

  <form action="" class="form1">
    <select name="" id="mat">
      <option value="0" selected>Дерево</option>
      <option value="1">Металл</option>
      <option value="2">Пластик</option>
    </select>

    <br><br> Высота, см.: <input type="number" id="height1" min="50" min="5000">
    <br><br> Длина, м.: <input type="number" id="width1" min="10" min="10000">

    <br><br><input type="submit" value="Результат" id="btn">
  </form>

  <div id="result"></div>
</div>

Когда элементов всего 3, это особо не играет роли, но в теории, хорошо бы один раз получить и сохраниить ссылки на элементы во внешнюю переменную,
а-ля let $height = $("#height1"); чтобы при вводе каждый раз заново не искать элемент, а использовать ссылку $height.val()

БЛОГ НА HUSL

Отслеживание изменений в input в JQuery

Ответы (2 шт):