Calculate the amount of jQuery



  • Please help me to meet the following costing condition.

    I have a html form. http://codepen.io/anon/pen/zrvzpO

    <form> 
    <input type="text" id="text-field">
    <input type="text" id="check-field">
    <p id="summ"></p>
    </form>
    

    If in the text field with id='text-field, I have a number of 10 to 15, it is multiplied by 200 (one condition is fulfilled) If I drive between 20 and 30, then multiply by 400, etc.

    If in the text field with id= "check-field" I insert a number from 0 to 15, it multiplys by 10 (first condition) If I drive between 50 and 60, then multiply by 200, etc.

    And in the field of id summ, the amount of these fields should be considered.

    Thank you very much.



  • Well, I think you can do it.

    // Подключаю слушатель к input по его id
    $('#text-field').bind('input', function() {
      // Проверяю, входит ли параметр в наш интервал
      if ($(this).val() > 10 && $(this).val() < 15) {
        // Если входит, то вывожу в p произведение параметра на 200
        $("#summ").html($(this).val() * 200);
      }
      else{
           // Иначе, вывожу предупреждающий текст
           $("#summ").html("Input is not >10 and <15. Please change input number");
      }
    });
    <form>
      <input type="text" id="text-field">
      <input type="text" id="check-field">
      <p id="summ"></p>
    </form>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    UPDATE

    I answer the question from the comments.

    // Подключаю слушатель к input по его id
    $('#text-field').bind('input', function() {
      $("#summ").html(+($(this).val()) + +($("#check-field").val()));
    

    });

    // Подключаю слушатель к input по его id
    $('#check-field').bind('input', function() {
    $("#summ").html(+($(this).val()) + +($("#text-field").val()));
    });

    <form>
    <input type="text" id="text-field">
    <input type="text" id="check-field">
    <p id="summ"></p>
    </form>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2