0

I want to sum the value of dynamically created textbox, but it doesn't work.

$(document).ready(function() {

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

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

});

function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".code").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));
}

function addrow() {
  $("#customFields").append('<tr><td><input type="text" class="ename" id="name" placeholder="Expense Name"/> &nbsp;</td>		                                  <td><input type="text" class="code" id="code" placeholder="Amount"/> &nbsp;</td> </tr>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="customFields">
  <tr>
    <td>
      <input type="button" value="Add" onclick="addrow();" />
    </td>
  </tr>
</table>

Improve this question
10
  • I'm having a hard time understanding what you want. When and how do you want the even generated? Commented May 12, 2017 at 3:47
  • I suppose you need a #sum element? Commented May 12, 2017 at 3:47
  • i also have #sum element <tr valign="top"> <tr id="summation"> <td>&nbsp;</td> <td align="right">Sum :</td> <td align="center"><span id="sum">0</span></td> </tr> Commented May 12, 2017 at 3:49
  • Yeah a lot of code is simply incorrect. Please take another round at your code and edit your question when you have something closer to your stated problem. Commented May 12, 2017 at 3:49
  • i want to show the total sum when anyone type the value in textbox . Commented May 12, 2017 at 3:51

2 Answers 2

Reset to default
2

You should use .on() on the table, which allows interaction with new dynamically-created elements. This will allow all keyup from all .code (even those added after page load) to bubble up to #customFields. The rest of your code should not need to be altered.

$(document).ready(function() {
  $("#customFields").on( "keyup", ".code", function(){
      calculateSum();
  });
});

http://api.jquery.com/on/

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

2 Comments

@arif click on the gray tick mark on the left side of the answer to mark it as an accepted answer.
clicked...@K3v1n
-1

Please see the Running Code

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

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

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

});

function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".code").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));
}

function addrow() {
  $("#customFields").append('<tr><td><input type="text" class="ename" id="name" placeholder="Expense Name"/> &nbsp;</td>                                          <td><input type="text" class="code" id="code" placeholder="Amount" onKeyUp = "calculateSum()"/> &nbsp;</td> </tr>');
}
</script>
</head>
<body>

<table id="customFields">
  <tr>
    <td colspan ="2">
      <input type="button" value="Add" onclick="addrow();" />
    </td>
  </tr>
  <tr><td><div id="sum">value</div></td></tr>
</table>

</body>
</html>
Improve this answer

1 Comment

but you write in your code. don't mind i am asking too many question

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.