Addition On javascript Not working when new row is added

Question

var    str ="";
var counter=0;
$(document).ready(function() {

  $(".amount, .penalty").change(function() {
    var total = 0;
    var amount = parseInt($(".amount").val()) || 0;
    console.log("amount: "+amount);
    var penalty = parseInt($(".penalty").val()) || 0;
    console.log("penalty: "+penalty);
    
    total = amount + penalty;
    console.log(total);
    $("#total").html(total);
  });

   $(".add").click(function() {
       alert();
		 
          
       str +="<div class='form-group row' >"
      +"<label class='col-xs-3 col-form-label mr-2'>Reason</label>"
      +"<div class='col-xs-9'>"
       + "<input type='text' class='form-control' id='reason"+counter+"' name='reason'>"
      +"</div>"


      +"<label class='col-xs-3 col-form-label mr-2'>Amount</label>"
      +"<div class='col-xs-9'>"
       + "<input type='text' class='form-control amount' id='amount"+counter+"' name='amount'>"
      +"</div>"

     + "<label class='col-xs-3 col-form-label mr-2'>Penalty</label>"
     +"<div class='col-xs-9'>"
        +"<input type='text' class='form-control penalty' id='penalty"+counter+"' name='penalty'>"

     +"</div>"

      + "<div class='col-xs-9'>"
        + "<button type='button' class='add'>+</button>"
      +  "<button type='button' class='remove'>-</button>"
      + "</div>"
    +  "</div>";
       counter++;
       $("#customsAdd").append(str);
		});
  
});

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
  <!--  <select class="form-control col-md-6">
      <option value="1">Customs</option>
      <option value="2">VAT</option>
      <option value="3">Excise</option>
      <option value="4">Others</option>

    </select>-->

    <!--div for customs!-->
    <div class="form-group row" id="forCustoms">
      <label class="col-xs-3 col-form-label mr-2">Reason</label>
      <div class="col-xs-9">
        <input type="text" class="form-control" id="reason" name="reason">
      </div>


      <label class="col-xs-3 col-form-label mr-2">Amount</label>
      <div class="col-xs-9">
        <input type="text" class="form-control amount" id="amount" name="amount">
      </div>

      <label class="col-xs-3 col-form-label mr-2">Penalty</label>
      <div class="col-xs-9">
        <input type="text" class="form-control penalty" id="penalty" name="penalty">
      </div>

      <div class="col-xs-9">
        <button type="button" class="add">+</button>
        <button type="button" class="remove">-</button>
      </div>
    </div>
    <!--div for customs! ends-->
    <div id="customsAdd"></div>
    <div class="col-md-12">
      Total :
      <p id="total"></p>
    </div>

  </div>
</body>

</html>

The total "4" is coming only of first row and upto that my program is correct but when I add the new row then the total is not changing and new row is not added on after clicking "+" button.How to bring new row on "+" button press and change in total?The total is not changing after entering data in 2nd row and "+" is not working.

Is the total is common to all rows?

User863
– User863

2019-02-25 06:48:44 +00:00
Commented Feb 25, 2019 at 6:48 — User863
– User863, Commented Feb 25, 2019 at 6:48

Mamun · Accepted Answer · 2019-02-25 08:05:32Z

5

You have to use .on() for the event to work on dynamically created element. This will allow the event to work on the elements those are added to the body at a later time.

Change:

 $(".add").click(function() {

To

 $(".container").on("click", ".add", function() {

You can use .map() and reduce() to calculate the total. Try the following way:

var str = "";
var counter = 0;
var total = 0;

$(document).ready(function() {
  $(".container").on("input", ".amount, .penalty", function() {
    var tArr = $(".amount, .penalty").map(function(i,el){
      return Number($(this).val());
    }).get();
    total = tArr.reduce((a,c) => a+c,0);
    //console.log(total);
    $("#total").html(total);
  });

  $(".container").on("click", ".add", function() { 
     str ="<div class='form-group row' >"
      +"<label class='col-xs-3 col-form-label mr-2'>Reason</label>"
      +"<div class='col-xs-9'>"
       + "<input type='text' class='form-control' id='reason"+counter+"' name='reason'>"
      +"</div>"


      +"<label class='col-xs-3 col-form-label mr-2'>Amount</label>"
      +"<div class='col-xs-9'>"
       + "<input type='text' class='form-control amount' id='amount"+counter+"' name='amount'>"
      +"</div>"

     + "<label class='col-xs-3 col-form-label mr-2'>Penalty</label>"
     +"<div class='col-xs-9'>"
        +"<input type='text' class='form-control penalty' id='penalty"+counter+"' name='penalty'>"

     +"</div>"

      + "<div class='col-xs-9'>"
        + "<button type='button' class='add'>+</button>"
      +  "<button type='button' class='remove'>-</button>"
      + "</div>"
    +  "</div>";
     counter++;
     $("#customsAdd").append(str);
  });

  $(".container").on("click", ".remove", function() {
    if($(".form-group.row").length > 1){ // remove only if there is more than one element
      $(this).closest('.form-group.row').remove();
      $(".amount, .penalty").trigger("input");
    }
  });

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <!--  <select class="form-control col-md-6">
      <option value="1">Customs</option>
      <option value="2">VAT</option>
      <option value="3">Excise</option>
      <option value="4">Others</option>

    </select>-->

  <!--div for customs!-->
  <div class="form-group row" id="forCustoms">
    <label class="col-xs-3 col-form-label mr-2">Reason</label>
    <div class="col-xs-9">
      <input type="text" class="form-control" id="reason" name="reason">
    </div>


    <label class="col-xs-3 col-form-label mr-2">Amount</label>
    <div class="col-xs-9">
      <input type="text" class="form-control amount" id="amount" name="amount">
    </div>

    <label class="col-xs-3 col-form-label mr-2">Penalty</label>
    <div class="col-xs-9">
      <input type="text" class="form-control penalty" id="penalty" name="penalty">
    </div>

    <div class="col-xs-9">
      <button type="button" class="add">+</button>
      <button type="button" class="remove">-</button>
    </div>
  </div>
  <!--div for customs! ends-->
  <div id="customsAdd"></div>
  <div class="col-md-12">
    Total :
    <p id="total"></p>
  </div>

</div>

edited Feb 25, 2019 at 8:05

answered Feb 25, 2019 at 6:45

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

5 Comments

ashwin Over a year ago

When i click "+" on 2nd row then multiple row is added and total is not changing

Terry Over a year ago

PSA: it's expensive to listen to bubbling events very high up the DOM tree (e.g. on the document or body). One should always bind to the closest element that is guaranteed to be present at runtime: for example, if the enclosing element <form> is always present at runtime, one can use $('form').on(...).

ashwin Over a year ago

@Terry can u help me how to make it simpler and easier to use?

ashwin Over a year ago

How to remove the row when "-" button is clicked? can u say me?

Mamun Over a year ago

@AshwinKarki, you can simply use closest to target the parent element to remove... please see the updated answer

Jon P · Accepted Answer · 2019-02-25 07:24:57Z

Mamun is right, you need on.

We can make some other improvements too.

We can use your existing row as a template, so if you change your html, you may not need to change your javascript.

You also have a logic issue with your addition function, it won't currently get all fields.

var    str ="";
     var counter=0;
    
$(document).ready(function() {
  //Use existing row as a template
   var rowTemplate = $("#forCustoms").clone(true);
   
  $(".container").on("change", ".amount, .penalty",function() {
    var total = 0;
    
    /*NOTE: Not sure what you want to actuall do here
      This will always get the fist values, not values 
      for all 
    
    var amount = parseInt($(".amount").val()) || 0;
    console.log("amount: "+amount);
    var penalty = parseInt($(".penalty").val()) || 0;
    console.log("penalty: "+penalty);
    */
    
    /*To Total all values*/
    var amount = 0;
    var penalty = 0;
    
    $(".form-group,.row").each(function(){
      amount += parseInt($(this).find(".amount").val(),10) || 0;
      penalty += parseInt($(this).find(".penalty").val(),10) || 0;
    })
    
    total = amount + penalty;
    console.log(total);
    $("#total").html(total);
  });

   $(".container").on("click" ,".add",function() {
       alert();
		 
       //Clone our template
       var t2 = rowTemplate.clone(true);
       //Make Ids Unique
       $(t2).attr("id", "row" + counter);
       $(t2).find("[name=reason]").attr("id", "reason" + counter);
       $(t2).find("[name=amount]").attr("id", "amount" + counter);
       $(t2).find("[name=penalty]").attr("id", "penalty" + counter);
     
       counter++;
       $("#customsAdd").append(t2);
		});
  
});

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
  <!--  <select class="form-control col-md-6">
      <option value="1">Customs</option>
      <option value="2">VAT</option>
      <option value="3">Excise</option>
      <option value="4">Others</option>

    </select>-->

    <!--div for customs!-->
    <div class="form-group row" id="forCustoms">
      <label class="col-xs-3 col-form-label mr-2">Reason</label>
      <div class="col-xs-9">
        <input type="text" class="form-control" id="reason" name="reason">
      </div>


      <label class="col-xs-3 col-form-label mr-2">Amount</label>
      <div class="col-xs-9">
        <input type="text" class="form-control amount" id="amount" name="amount">
      </div>

      <label class="col-xs-3 col-form-label mr-2">Penalty</label>
      <div class="col-xs-9">
        <input type="text" class="form-control penalty" id="penalty" name="penalty">
      </div>

      <div class="col-xs-9">
        <button type="button" class="add">+</button>
        <button type="button" class="remove">-</button>
      </div>
    </div>
    <!--div for customs! ends-->
    <div id="customsAdd"></div>
    <div class="col-md-12">
      Total :
      <p id="total"></p>
    </div>

  </div>
</body>

</html>

Collectives™ on Stack Overflow

Addition On javascript Not working when new row is added

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related