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>