CODEWITHSUNDEEP
javascript
XamarinDevil
XamarinDevil

Reputation: 891

Dynamically Changing values using Javascript

How can i dynamically change values for my paragraphs depending on the product selected?

In my code this is what is happening. When i select MacBook and enter the qty, i am able the actual total price but after i select another product, it globally changes the Total for every product already selected. 

    Item: MacBook 

    Amount : 8900

    Qty : 1

    Total : 1200


   Item : HP Probook

   Amount : 1200

   Quantity: 1

   Total:  1200

JS

 function OptionsSelected(product)
{

    $('.container').append(
        '<div class="product">'+
     '<input type="hidden"  value='+product.id+'    name="product[] />'+
     '<p class="name"> Item: ' + product.name + '</p>'+
        '<p class="price"   data-price="'+product.value+'">Price  :  ' + product.value + '</p>'+
        '<input type="text" class="quantity" name="quantity" />'+
        '<p class="total">Total  $:<span></span></p>'+
         '</div>'

    ).appendTo('form')

    $('.container').on('keyup','.quantity',function()

       {
        var a = Number($(this).val());
        var b = Number($(this).closest('div').find('.price').data('price'));    
        c = a * b;
        //debugger --breakpoint
        alert('Debugging prices for items selected  ' +b);

        $(".total span").text(c);

       });

HTML

  <input onclick="return OptionsSelected(this)" type="checkbox" id="{!! $product->id !!}" name="{!! $product->name !!}" value="{!! $product->price !!}" /> 

<div class="container" id="container">


</div>

PS:I tried to create a working snippet but i couldn't get that working and this is a new thread for a question already asked

Upvotes: 1

Views: 155

Answers (2)

YouneL
YouneL

Reputation: 8351

You should target your appended product by an id and use this id as selector to attach the keyup event:

function OptionsSelected(product)
{

  $('.container').append(
      '<div class="product" id=product'+ product.id +'>'+
      '<input type="hidden"  value='+product.id+'    name="product[] />'+
      '<p class="name"> Item: ' + product.name + '</p>'+
      '<p class="price"   data-price="'+product.value+'">Price  :  ' + product.value + '</p>'+
      '<input type="text" class="quantity" name="quantity" />'+
      '<p class="total">Total  $:<span></span></p>'+
      '</div>'

   );

   $(document).find('#product'+product.id+'>.quantity').keyup(function() {
      var a = Number($(this).val());
      var b = Number($(this).closest('div').find('.price').data('price'));    
      c = a * b;

      $(this).next('.total').children('span').text(c);

   });

}

Try this fiddle fiddle

Upvotes: 0

Andreas
Andreas

Reputation: 21881

This line

$(".total span").text(c);

changes the content of every element which has the class total

Use this (as already done to get the correct quantity) to only change the .total of the changed product

$('.container').on('keyup', '.quantity', function () {
    var quantityInput = $(this);
    var product = quantityInput.closest('div');

    var quantity = Number(quantityInput.val());
    var price = Number(product.find('.price').data('price'));

    product.find(".total span").text(quantity * price);
});

Upvotes: 1

Related Questions