如何使用其他表單輸入中的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>