如何使用其他表单输入的 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，然后在下面的文本总计中显示所有这些值的总和。

我在"总计文本">

下方还有另一个输入字段，我希望它所做的只是将出现在其上方"总计文本"中的相同数字填充到输入字段中，以便我可以在提交表单时使用此值作为总点数。

Answer 1

你非常接近。 jQuery方法是val()，而不是value()。

改变：

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

。。。自：

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

片段：

$(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>