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

Question

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. 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.

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.

Answer 1

You're very close. The jQuery method is val() , not 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>