javascript - Update on keyup value of a text field -

i have following code :

{% product in app.session.get('abasket') %}     <input id="product_quantity_{{ product['product_id'] }}" class="form-control quantity" type="text" value="{{ product['product_quantity'] }}" name="" onkeyup="calculateprice({{ product['product_price'] }},{{ product['product_id'] }})">     <span id="total_price_{{ product['product_id'] }}">{{ product['product_quantity'] * product['product_price'] }}</span> {%endfor} <div id="total_price_basket">total:0</div> 

and js function :

<script type="application/javascript">     function calculateprice(price, product_id) {         var x = document.getelementbyid("product_quantity_"+product_id);         var total_price = price * x.value;         $("#total_price_"+product_id).html(total_price);         $("#total_price_basket").html();     } </script> 

so, price products works fine, question how change value div>total_price_basket onkeyup? must gather amount of each product. can me please? thx in advance

i make use of jquery , rid of obtrusive inline event handlers. html markup change little use data attributes:

{% product in app.session.get('abasket') %}     <input data-id="{{ product['product_id'] }}"             data-price="{{ product['product_price'] }}"            value="{{ product['product_quantity'] }}"            class="form-control quantity" type="text">     <span class="total" id="total_price_{{ product['product_id'] }}">{{ product['product_quantity'] * product['product_price'] }}</span> {%endfor} <div id="total_price_basket">total:0</div> 

js:

$('.quantity').on('keyup', function () {      // update individual price     var price = $(this).data('price') * this.value;     $('#total_price_' + $(this).data('id')).text(price);      // update total     var total = 0;     $('.total').each(function() {         total += number($(this).text());     });     $('#total_price_basket').text('total: ' + total); }) // trigger initial calculation if needed .trigger('keyup'); 

demo: http://jsfiddle.net/c64xfrpr/