同一对象被推入arrayList

Question

 var totalList=[]; $("#formContainer").on("click","button",function() { var selector = "div."+$(this).data("type")+"-table"; var $div = $(this).closest(selector); var $newDiv = $div.clone(); $newDiv.find(":input").val(""); // clear all $newDiv.find("[type=number]").val(0); // clear numbers $newDiv.find(".sum").text(0); // clear total $newDiv.insertAfter($div) var user_profile = [ { assessmentType: "PRE", assessCatId :1, assessReason:$(".customReason").val(), assessAmount:$(".customAmount").val(), assessPenalty: $(".customPenalty").val() } ] totalList.push(user_profile); console.log(totalList); }); $("form").submit(function() { event.preventDefault(); }); $("#formContainer").on("input","[type=number]",function() { $("#formContainer [type=number]").each(function() { var $row = $(this).closest(".row"); var $fields = $row.find("[type=number]"); var val1 = $fields.eq(0).val(); var val2 = $fields.eq(1).val(); var tot = (isNaN(val1)?0:+val1)+(isNaN(val2)?0:+val2) $row.find(".sum").text(tot); }); var total = 0; $(".sum").each(function() { total += isNaN($(this).text())?0:+$(this).text() }); console.log(total); $("#tot").text(total); }); 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <form id="myForm"> <div id="formContainer" class="col-md-12" style="float: none;"> <!-- <button onclick="myFunction()" class="pull-right">+</button> --> <div style="margin-bottom: 30px;"> <div class="form-group row"> <div class="col-md-1"></div> <div class="col-md-4"> <label>Reason</label> </div> <div class="col-md-2"> <label>Amount</label> </div> <div class="col-md-2"> <label>Penalty</label> </div> <div class="col-md-1">Total</div> <div class="col-md-2">Action</div> </div> <div class="customs-table row"> <div class="col-md-1"> <label>Customs</label> </div> <div class="col-md-4"> <input type="text" class="form-control customReason" id="customReason" /> </div> <div class="col-md-2"> <input type="number" class="form-control txt customAmount" value="0" name="abc" min="0" id="customAmount" /> </div> <div class="col-md-2"> <input type="number" class="form-control txt customPenalty" value="0" name="abc" min="0" id="customPenalty" /> </div> <div class="col-md-1"> <span class="sum">0</span> </div> <div class="col-md-2"> <button data-type="customs" class="add-customs">+</button> </div> </div> <div class="vat-table row"> <div class="col-md-1"> <label>VAT</label> </div> <div class="col-md-4"> <input type="text" class="form-control vatReason" name="vatReason" /> </div> <div class="col-md-2"> <input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" /> </div> <div class="col-md-2"> <input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" /> </div> <div class="col-md-1"> <span class="sum">0</span> </div> <div class="col-md-2"> <button class="add-vat" data-type="vat">+</button> </div> </div> <div class="excise-table row"> <div class="col-md-1"> <label>Excise</label> </div> <div class="col-md-4"> <input type="text" class="form-control exciseReason" name="exciseReason" /> </div> <div class="col-md-2"> <input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" /> </div> <div class="col-md-2"> <input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" /> </div> <div class="col-md-1"> <span class="sum">0</span> </div> <div class="col-md-2"> <button data-type="excise" class="add-excise">+</button> </div> </div> <div class="col-md-1 pull-right"> <label>Total:</label> <b> <span id="tot">0</span></b> </div> </div> <button type="submit" class="btn btn-success pull-right">Submit</button> </div> </form> 

Here i clicked "+" button and second custom row appears.

I tried to push them into arrayList named "totalList=[];" but it is pushing the same object repeatedly so:(See Array1 and array2 are same though their data from form is different)

How can i make this arrayList so dynamic which just push the current object rather than the old object? I am not able to push the newly created object into the arrayList.How can i change my arraylist?

Answer 1

You do not want to do this at click add time

Just do this at submit time:

$("form").submit(function() {
  event.preventDefault();
  var user_profile = [];
  $(".row").each(function(i) {
    var $fields = $(this).find(":input");
    if ($fields.length > 0) {
      var cat = $(this).find("div>label").eq(0).text(); // use the label of the row
      var catId = ["","Customs","VAT","Excise"].indexOf(cat);
      user_profile.push({
        assessmentType: "PRE",
        assessCatID : catId, 
        assessReason: $fields.eq(0).val(),
        assessAmount: $fields.eq(1).val(),
        assessPenalty: $fields.eq(2).val()
      });
    }
  });
  console.log(user_profile);

  $.ajax({
    url: "someserverfunction",
    data: JSON.encode(user_profile),
    success : function(data) { }
    error: function() { }
  });  
});

Also REMOVE the IDs you added to my code. They are not needed