Вывод результата калькулятора стоимости без клика

Question

Есть код калькулятора стоимости в зависимости от введенной суммы с разными скидками. Сейчас итоговое значение показывается после клика на кнопку. Как сделать что бы сумма сразу отображалась, при вводе числа в input?

$(function() {
  function count() {
    var
      a = 49,
      b = 99,
      c = 99999,
      sum = +$("#count_inp").val() || 0,
      cost = 0,
      $result = $("#result p");

    if (sum <= a) {
      cost = sum * 1;
    } else if (sum > a && sum <= b) {
      cost = (sum - (sum / 10 / 2)) ;
    } else if (sum > b && sum <=c) {
      cost = (sum - (sum / 10));
    } else {
      
    }
    
    renderCost(cost)
  }
  
  function renderCost(value) {
    $("#result p").html(value === 0 ? 'Укажите расстояние' : value + " Рублей")
  }

  var s = $("#process_all_b");
  s.click(count)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<div id="calc_div">

    <div id="quantity_div"><p class="c">
        Укажите желаемую сумму сертификата<br>
        <input type="text" id="count_inp"><br>
    </div>

    <div id="final_div">
        <p class="c"><button id="process_all_b" >Посчитать</button><br></p>
        <div id="result"><p class="c">0 Рублей</p></div>
    </div>
</div>

Answer 1

Можете использовать on('input') вместо submit().

$(function() {
  function count() {
    var
      a = 49,
      b = 99,
      c = 99999,
      sum = +$("#count_inp").val() || 0,
      cost = 0,
      $result = $("#result p");

    if (sum <= a) {
      cost = sum * 1;
    } else if (sum > a && sum <= b) {
      cost = (sum - (sum / 10 / 2)) ;
    } else if (sum > b && sum <=c) {
      cost = (sum - (sum / 10));
    } else {
      
    }
    
    renderCost(cost)
  }
  
  function renderCost(value) {
    $("#result p").html(value === 0 ? 'Укажите расстояние' : value + " Рублей")
  }

  $("#quantity_div").on('input', count);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<div id="calc_div">

    <div id="quantity_div"><p class="c">
        Укажите желаемую сумму сертификата<br>
        <input type="text" id="count_inp"><br>
    </div>

    <div id="final_div">
        <div id="result"><p class="c">0 Рублей</p></div>
    </div>
</div>

БЛОГ НА HUSL

Вывод результата калькулятора стоимости без клика

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