[英]How do I update a form's input value with a javascript keyup function from other form inputs
I have a form that uses the keyup function to multiply the input values on 3 fields to give me a total which I can display with text. 我有一种使用keyup函数将3个字段上的输入值相乘的形式,从而得到可以与文本一起显示的总数。 Here is a fiddle of what I have:
这是我所拥有的东西:
$(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>
As you can see, when you input a number value into one of the 3 fields, it multiplies the number by either 5, 10 or 25 and then displays them sum of all of these values in a Total below in text. 如您所见,当您在3个字段之一中输入数字值时,它将数字乘以5、10或25,然后在下面的“总计”中显示所有这些值的总和。
I have another input field below the Total-text and all I want it to do is to populate the same number that appears in the Total-text above it, into the input field so I can use this value when the form is submitted as a total amount of points. 我在“总计”文本下方有另一个输入字段,我想要做的就是将其上方“总计”文本中出现的相同数字填充到输入字段中,以便在将表单提交为总积分。
You're very close. 你很亲密 The jQuery method is
val()
, not value()
. jQuery方法是
val()
,而不是value()
。
Change: 更改:
$("#totes").value(mult);
… to: … 至:
$("#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.