CODEWITHSUNDEEP
javascriptjqueryhtml
ashwin
ashwin

Reputation: 99

Addition On javascript Not working when new row is added

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>

enter image description here

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.

Upvotes: 4

Views: 124

Answers (2)

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 5

Jon P
Jon P

Reputation: 19797

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>

Upvotes: 0

Related Questions