Dynamically Changing values using Javascript

Question

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

Every call of OptionsSelected adds a new keyup event listener to #container — Andreas
– Andreas, Commented Oct 30, 2017 at 10:41
@Andreas How is that affecting it please? If you could elaborate — XamarinDevil
– XamarinDevil, Commented Oct 30, 2017 at 10:43
What if in jQuery you write as $("#yourID").keydown(function () { OptionsSelected(); }); — Ali Sajid
– Ali Sajid, Commented Oct 30, 2017 at 10:49
1. I'm only showing you problems with your code. If it should have been an answer to the problem, I would have added it as an answer. 2. There's at least one missing quote in: value='+product.id+' name="product[] />' 3. There's no code related to .total in your question — Andreas
– Andreas, Commented Oct 30, 2017 at 10:55

Andreas · Accepted Answer · 2017-10-30 11:15:06Z

1

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);
});

answered Oct 30, 2017 at 11:15

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

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

Comments

YouneL · Accepted Answer · 2017-11-08 00:38:03Z

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

Collectives™ on Stack Overflow

Dynamically Changing values using Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related