如何使用来自其他表单输入的 javascript keyup 函数更新表单的输入值

Question

我有一个表单，它使用 keyup 函数将 3 个字段的输入值相乘，得到一个可以用文本显示的总数。这是我所拥有的fiddle：

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

如何使用来自其他表单输入的 javascript keyup 函数更新表单的输入值

How do I update a form's input value with a javascript keyup function from other form inputs

javascript

jquery

html

forms

keyup