0

I have a JavaScript function to aggregate the values of input fields, which I sourced from this answer to a similar question. My function appears to be working, however it only calculates the total value after one of the default values has been amended. How can I include the default values in the functions aggregation from the start? Here's a fiddle, and here's the code:

JavaScript:

$(document).ready(function(){

    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".qty1").each(function() {

    $(this).keyup(function(){
        calculateSum();
                    });
                });

            });

    function calculateSum() {

        var sum = 0;
        //iterate through each textboxes and add the values
        $(".qty1").each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
        sum += parseFloat(this.value);
        }

        });

    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(2)) * 0.2;}

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<tr>
    <td width="40px">1</td>
    <td>Butter</td>
    <td><input class="txt" type="text" name="txt" value="65"/></td>
</tr>
<tr>
    <td>2</td>
    <td>Cheese</td>
    <td><input class="txt" type="text" name="txt" value="32"/></td>
</tr>
<tr>
    <td>3</td>
    <td>Eggs</td>
    <td><input class="txt" type="text" name="txt" value="47"/></td>
</tr>
<tr>
    <td>4</td>
    <td>Milk</td>
    <td><input class="txt" type="text" name="txt" value="31"/></td>
</tr>
<tr>
    <td>5</td>
    <td>Bread</td>
    <td><input class="txt" type="text" name="txt" value="69"/></td>
</tr>
<tr>
    <td>6</td>
    <td>Soap</td>
    <td><input class="txt" type="text" name="txt" value="65"/></td>
</tr>
<tr id="summation">
    <td>&nbsp;</td>
    <td align="right">Sum :</td>
    <td align="center"><span id="sum">0</span></td>
</tr>

1 Answer 1

3

Simply call calculateSum() inside $(document).ready and outside of the keyup event:

$(document).ready(function(){
  calculateSum(); //call the function here
  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  $(".txt").each(function() {

    $(this).keyup(function(){
      calculateSum();
    });
  });

});

function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".txt").each(function() {

    //add only if the value is number
    if(!isNaN(this.value) && this.value.length!=0) {
      sum += parseFloat(this.value);
    }

  });
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#sum").html(sum.toFixed(2));
}
body {
  font-family: sans-serif;
}
#summation {
  font-size: 18px;
  font-weight: bold;
  color:#174C68;
}
.txt {
  background-color: #FEFFB0;
  font-weight: bold;
  text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
  <tr>
    <td width="40px">1</td>
    <td>Butter</td>
    <td><input class="txt" type="text" name="txt" value="65"/></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Cheese</td>
    <td><input class="txt" type="text" name="txt" value="32"/></td>
  </tr>
  <tr>
    <td>3</td>
    <td>Eggs</td>
    <td><input class="txt" type="text" name="txt" value="47"/></td>
  </tr>
  <tr>
    <td>4</td>
    <td>Milk</td>
    <td><input class="txt" type="text" name="txt" value="31"/></td>
  </tr>
  <tr>
    <td>5</td>
    <td>Bread</td>
    <td><input class="txt" type="text" name="txt" value="69"/></td>
  </tr>
  <tr>
    <td>6</td>
    <td>Soap</td>
    <td><input class="txt" type="text" name="txt" value="65"/></td>
  </tr>
  <tr id="summation">
    <td>&nbsp;</td>
    <td align="right">Sum :</td>
    <td align="center"><span id="sum">0</span></td>
  </tr>
</table>

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.