sum the values of input fields on keyup

Question

I want to add all input fields values. Some of the fields are constant and some too you have to click on a button to add them and calculate the values.

The add button when clicked adds the input fields correctly but the calculation of all the values is the problem.

$(document).on("keyup", ".price", function() {
  var closestParent = $(this).closest('tr');
  var total = closestParent.find(".price").val();
  var tuition = document.getElementById("tuition").value;
  var pta = document.getElementById("pta").value;
  var transport = document.getElementById("transport").value;
  var totals = parseInt(total);
  var t = 0;
  $('.price').each(function(i, e) {
    var amt = $(this).val() - 0;
    var z = t += amt;
    var totalz = z + tuition + transport + pta;
    document.getElementById("tot").value = tuition;
    console.log(t);
    console.log(tuition)

  })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td style="width: 60%;">
        <h5>Tuition Fees </h5>
      </td>
      <td>
        <input class="form-control" id="tuition" name="tuition_fees" type="text" placeholder="Enter Tuition Fees..." value="" style="border:none;" />

      </td>
    </tr>
    <tr>
      <td style="width: 60%;">
        <h5>PTA Dues </h5>
      </td>
      <td>
        <input class="form-control" id="pta" name="PTA_dues" type="text" placeholder="Enter PTA Dues Amount..." value="" style="border:none;" />

      </td>
    </tr>
    <tr>
      <td style="width: 60%;">
        <h5>Transport Fares </h5>
      </td>
      <td>
        <input class="form-control" id="transport" name="transport_fares" type="text" placeholder="Enter Transport Fare..." value="" style="border:none;" />
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <h5>Additional Fees </h5>
      </td>
    </tr>
  </tbody>
</table>
<table class="table table-bordered table-hover table-striped" id="invoiceItem">
  <tbody>
    <tr>

      <td style="width: 60%;">
        <div class="row">
          <div class="col-md-1"><input class="itemRow" type="checkbox"></div>
          <div class="col-md-10"><input type="text" style="border:none;" name="productCode[]" placeholder="Enter Fees Name" id="productCode_1" class="form-control price" autocomplete="off"></div>
        </div>
      </td>
      <td><input type="text" name="productName[]" style="border:none;" placeholder="Enter Amount" id="price_" class="form-control" autocomplete="off"></td>
    </tr>
  </tbody>

</table>
<div class="row">
  <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
    <button class="btn btn-danger delete" id="removeRows" type="button">- Delete item</button>
    <button class="btn btn-success" id="addRows" type="button">+ Add item</button>
  </div>

</div>
<br/>
<table class="table table-bordered">
  <tr>
    <td style="width:60%;">
      <h5>TOTAL FEES </h5>
    </td>
    <td><input class="form-control" id="tot" name="total_fees" type="text" placeholder="total fees" value="" style="border:none;" /></td>
  </tr>
</table>

What I want to do is get the total summation of the values in the total fees input field

didn't read your full question but seems like you need to parse the value to `int` first — Muhammad Usman, Jul 09 '19 at 06:29
I think the problem can be with the way you are adding the event listener. Try removing the selector(I mean `".price"`) from the line `$(document).on("keyup",".price",function(){`. I haven't read your code fully though — Aditya, Jul 09 '19 at 06:41

score 0 · Answer 1 · answered Jul 09 '19 at 06:38

parse your textbox values using parseInt. then you are redefining t everytime so I edited it. then move your class name price from enter fee name to enter amount textbox.

$(document).on("keyup",".price",function(){
            var closestParent = $(this).closest('tr');
         var total = parseInt(closestParent.find(".price").val()); 
         var tuition = parseInt(document.getElementById("tuition").value);
         var pta = parseInt(document.getElementById("pta").value);
         var transport = document.getElementById("transport").value;
         var totals = parseInt(total);
          var t = 0;
         $('.price').each(function(i,e){ 
            var amt =$(this).val()-0; 
            t += amt;
                var z = t;
                var totalz = z +  tuition + transport +  pta;
                document.getElementById("tot").value=tuition;
         console.log(t);
         console.log(tuition)

         })

           });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tbody>
              <tr>
                <td style="width: 60%;">
                  <h5>Tuition Fees </h5>
                </td>
                <td>
                  <input class="form-control" id="tuition" name="tuition_fees" type="text"
                  placeholder="Enter Tuition Fees..." value=""  style="border:none;" />

                </td>
              </tr>
              <tr>
                <td style="width: 60%;">
                  <h5>PTA Dues </h5>
                </td>
                <td>
                  <input class="form-control" id="pta" name="PTA_dues" type="text"
                  placeholder="Enter PTA Dues Amount..." value="" style="border:none;" />

                </td>
              </tr>
               <tr>
                <td style="width: 60%;">
                  <h5>Transport Fares </h5>
                </td>
                <td>
                  <input class="form-control" id="transport" name="transport_fares" type="text"
                  placeholder="Enter Transport Fare..." value="" style="border:none;" />
                </td>
              </tr>
               <tr>
                <td colspan="2" >
                  <h5>Additional Fees </h5>
                </td>
              </tr>
            </tbody>
          </table>
          <table class="table table-bordered table-hover table-striped" id="invoiceItem">
            <tbody>
              <tr>

                  <td style="width: 60%;"><div class="row">
                    <div class="col-md-1"><input class="itemRow" type="checkbox"></div>
                    <div class="col-md-10"><input type="text" style="border:none;" name="productCode[]" placeholder="Enter Fees Name" id="productCode_1" class="form-control" autocomplete="off"></div></div></td>
              <td><input type="text" name="productName[]" style="border:none;" placeholder="Enter Amount" id="price_" class="form-control price" autocomplete="off"></td>
              </tr>
            </tbody>

          </table>
                <div class="row">
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
          <button class="btn btn-danger delete" id="removeRows" type="button">- Delete item</button>
          <button class="btn btn-success" id="addRows" type="button">+ Add item</button>
        </div>

      </div>
      <br/>
      <table class="table table-bordered">
         <tr>
                <td style="width:60%;"  >
                  <h5>TOTAL FEES </h5>
                </td>
                <td><input class="form-control" id="tot" name="total_fees" type="text"
                  placeholder="total fees" value="" style="border:none;" /></td>
              </tr>
      </table>

sum the values of input fields on keyup

1 Answers1