On the basis of quantity and product price, total price Update

Question

My HTML structure:

<div class="pricesection">
        <label id="productPrice">
        <strong>
        <span id="totalprice"> 129,00</span>
        <span>$</span>
        </strong>
        </label>
        <input type="text" value="1" name="am" id="quantity">
        <button class="submitbtn" type="submit">add to Cart</button>
</div>

My JS code:

$('#quantity').keyup(function(){
  $('#quantity').each(function () {  
  var qty = $('#quantity').val();
  var price = $('#totalprice').val();
  var total = price * qty;
  });

  $('#totalprice').html(total);
});

I have found many examples, not suitable. :-(

After entering Quantity Item Price will be Automatically Updated. If "0", letter, "empty" or after canceling Original price must be restored.

I always get "0" value ​​Back!

I am very grateful for any help!

Answer 1

   var price = $('#totalprice').val();//this is wrong!!!

get the html of span.Not the value

var price = $('#totalprice').text();//this is the correct syntax

So,Your code becomes--:

  $('#quantity').keyup(function () {
        var qty = $('#quantity').val();
        var price = parseInt($('#totalprice').text()); //or $('#totalprice').html()
        var total = price * qty;
        $('#totalprice').html(total);
    });

Answer 2

Try this........HTML

<div class="pricesection">
        <input type="text" id="productPrice"/>
        <strong>
        <span id="totalprice"> 129,00</span>
        <span>$</span>
        </strong>
        <input type="text" value="1" name="am" id="quantity">
        <button class="submitbtn" type="submit">add to Cart</button>
</div>

...............JS........

$('#quantity').keyup(function(){
  var qty = $('#quantity').val();
  var price = $('#productPrice').val();
  var total = price * qty;

  $('#totalprice').html(total);
});

Answer 3

Why is there a loop on #quantity ? You don't need that. Try the following code.

$('#quantity').keyup(function () {
    var qty = $('#quantity').val();
    var price = parseInt($('#totalprice').text());
    var total = price * qty;
    $('#totalprice').html(total);
});

Notice parseInt($('#totalprice').text()); .val() doesn't work with span so you would have to use .text() and parse the result in int

Answer 4

Try

var $totalprice = $('#totalprice');
var price = parseInt($.trim($totalprice.text()).replace(',', '.'));
$totalprice.data('totalprice', price);
$('#quantity').keyup(function(){
    var qty = this.value;
    var price = $totalprice.data('totalprice');
    var total = price * qty;

    $totalprice.html(total ? total : price);
});

Note: The number formatting is not done

Answer 5

Your first problem is that totalprice is a span, so it doesn't have a .val() function (that's only for inputs), use .text() instead.

The contents of the span currently has a comma in it, which won't be automatically parsed into a number. You need to use parseFloat() , and you need to use a decimal point, not a comma.

parseFloat("129,50") is 129
parseFloat("129.50") is 129.50

Secondly, you're doing an each over your quantity fields but there's only one. Maybe you wanted that for the future (in which case you should use classes not IDs), but here's some JS that should implement the feature you wanted and fix your bug as well (untested):

$('#quantity').keyup(function(){
    var qty = $('#quantity').val();
    if (qty && qty > 0){
        var price = parseFloat($('#totalprice').text());
        var total = price * qty;
        $('#totalprice').text(total);
    }
    else{
        //Find a better way of restoring this value
        $('#totalprice').text("129.50");
    }
});

Hope this helps. :)