Как я могу обновить входное значение формы с помощью функции javascript keyup из других входных данных формы

Question

У меня есть форма, которая использует функцию keyup для умножения входных значений на 3 поля, чтобы получить итоговое значение, которое я могу отобразить с текстом. Вот что я имею в виду:

 $(document).ready(function () {
       $(".txtMult1 input").keyup(multInputs);
       $(".txtMult2 input").keyup(multInputs);
       $(".txtMult3 input").keyup(multInputs);

       function multInputs() {
           var mult = 0;
           // for each row:
           $("span.txtMult1").each(function () {
               // get the values from this row:
               var $val1 = $('.val1', this).val();
               var $val2 = 5;
               var $total = ($val1 * 1) * ($val2 * 1)
               $('.multTotal',this).text($total);
               mult += $total;
           });
           
           $("span.txtMult2").each(function () {
               // get the values from this row:
               var $val1 = $('.val1', this).val();
               var $val2 = 10;
               var $total = ($val1 * 1) * ($val2 * 1)
               $('.multTotal',this).text($total);
               mult += $total;
           });
           
           $("span.txtMult3").each(function () {
               // get the values from this row:
               var $val1 = $('.val1', this).val();
               var $val2 = 25;
               var $total = ($val1 * 1) * ($val2 * 1)
               $('.multTotal',this).text($total);
               mult += $total;
           });
           
           $("#grandTotal").text(mult);
           $("#totes").value(mult);
           
       }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>How many units did you sell?</div>
  
  <form>
  <div>
    <span class="txtMult1">
    <input name="txtEmmail" class="val1" /> x5 points </span>
  </div>
  
  <div>
    <span class="txtMult2">
    <input name="txtEmmail" class="val1" /> x10 points </span>
  </div>
        
  <div>
    <span class="txtMult3">
    <input name="txtEmmail" class="val1" /> x25 points </span>
  </div>
        
   <div>Total points <span id="grandTotal">0.00</span><br>
   </div>
            
    <div> 
    <input name="totes" id="totes" value="0" />
    </div>
     
    <input id="sbmt" type="submit" name="Submit" value="Submit">  
    </form>
      
</div>

Как вы можете видеть, когда вы вводите числовое значение в одно из 3 полей, оно умножает число на 5, 10 или 25, а затем отображает их сумму всех этих значений в итоговом значении ниже в тексте.

У меня есть другое поле ввода под Total-text, и все, что я хочу сделать, это заполнить то же число, которое отображается в Total-text над ним, в поле ввода, чтобы я мог использовать это значение, когда форма отправляется как общее количество баллов.

Answer 1

Ты очень близко Метод jQuery является val() не value(),

Изменить:

$("#totes").value(mult);

… Чтобы:

$("#totes").val(mult);

Snippet:

$(document).ready(function() {
  $(".txtMult1 input").keyup(multInputs);
  $(".txtMult2 input").keyup(multInputs);
  $(".txtMult3 input").keyup(multInputs);

  function multInputs() {
    var mult = 0;
    // for each row:
    $("span.txtMult1").each(function() {
      // get the values from this row:
      var $val1 = $('.val1', this).val();
      var $val2 = 5;
      var $total = ($val1 * 1) * ($val2 * 1)
      $('.multTotal', this).text($total);
      mult += $total;
    });

    $("span.txtMult2").each(function() {
      // get the values from this row:
      var $val1 = $('.val1', this).val();
      var $val2 = 10;
      var $total = ($val1 * 1) * ($val2 * 1)
      $('.multTotal', this).text($total);
      mult += $total;
    });

    $("span.txtMult3").each(function() {
      // get the values from this row:
      var $val1 = $('.val1', this).val();
      var $val2 = 25;
      var $total = ($val1 * 1) * ($val2 * 1)
      $('.multTotal', this).text($total);
      mult += $total;
    });

    $("#grandTotal").text(mult);
    $("#totes").val(mult);

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>How many units did you sell?</div>

  <form>
    <div>
      <span class="txtMult1">
    <input name="txtEmmail" class="val1" /> x5 points </span>
    </div>

    <div>
      <span class="txtMult2">
    <input name="txtEmmail" class="val1" /> x10 points </span>
    </div>

    <div>
      <span class="txtMult3">
    <input name="txtEmmail" class="val1" /> x25 points </span>
    </div>

    <div>Total points <span id="grandTotal">0.00</span><br>
    </div>

    <div>
      <input name="totes" id="totes" value="0" />
    </div>

    <input id="sbmt" type="submit" name="Submit" value="Submit">
  </form>

</div>