如何使用其他表单输入的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);

<强>段：

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