CODEWITHSUNDEEP
javascriptjqueryajax
Learning
Learning

Reputation: 75

sum of amount not working by using ajax response

I try this format but its not working

**

"name": [{
  "id": 3,
  "qty": 2
}, {
  "id": 4,
  "qty": 5
}]

** This is my function once after get response on keyup qty textbox i want to add all amount in one textbox and show all entered value id and qty in above mention format

function _getPriceCalculation() {
            var sum = 0;
            $.ajax({
                type: "GET",
                url: $('#categoryList').val(),
                dataType: 'json',
                success: function(data) {
                    $.each(data, function(index, item) {
                        $('<div id="price_calculation"><div class="col-lg-4 main"><input type="text" value="'+item.name+'" readonly class="form-control"/></div><div class="col-lg-4 main" style="display:none;"><input type="text" name="id" id="price-'+item.id+'" value="'+item.price+'" readonly class="form-control" onkeypress="return isNumber(event)"/></div><div class="col-lg-4 main"><input type="text" value="" name="qty" id="qty-'+item.id+'" class="form-control qty" onkeypress="return isNumber(event)"/></div><div class="col-lg-4 main"><input type="text" name="amount" id="amount-'+item.id+'" value="" readonly class="form-control amount" onkeypress="return isNumber(event)"/></div>').appendTo("#price-calculation-view");    
                        $("#qty-"+item.id).keyup(function(){
                            var qty = $("#qty-"+item.id).val();
                            var price = $("#price-"+item.id).val();
                            var total = qty * price;
                            $("#amount-"+item.id).val(total);
                        });
                    });
                }
            });

        }

$(document).on("keyup", "input[name='qty']", function() {
    //$('input[name="qty"]').change(function(){
       // alert();
      var name = [];
      $('.main').each(function(index,item){
        var obj={};
        obj.id = $(item).find('input[name="id"]').val();
        obj.qty = $(item).find('input[name="qty"]').val();
        name.push(obj)
      });
      console.log(name);
});

How to achieve this ?

Upvotes: 0

Views: 278

Answers (1)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48367

$("#qty-"+item.id) DOM elements are added dynamically on the page.

You have to use event delegation for elements which were added dynamically.

You should bind keyup event handler using .on() method.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$(document).on('keyup','#qty-'+item.id, function(){
     var qty = $("#qty-"+item.id).val();
     var price = $("#price-"+item.id).val();
     var total = qty * price;
     $("#amount-"+item.id).val(total);
});

Upvotes: 1

Related Questions