Question

There is a one section of orders page where users can add new fields to add new products. They choose a product from a drop down menu and its price is written in another column. I need to add a functionality that will allow users to enter quantity amount, and total price will be updated as soon as quantity amount changes. I tried it with the following codes but I keep receiving 0 for the total price.

My codes.

$('#AddProduct').click(function() {
    var i = 0;
    var adding = $(+(i++)+'<div class="row'+(i)+'"><div class="column width50"><input type="text" id="PRODUCTNAME" name="PRODUCTNAME'+(i)+'" value="" class="width98" /><input type="hidden" class="PRODUCTID" name="PRODUCTID" /><input type="hidden" class="UNITPRICE" name="UNITPRICE'+(i)+'" /><small>Search Products</small></div><div class="column width20"><input type="text" class="UNITQUANTITY" name="UNITQUANTITY'+(i)+'" value="" class="width98" /><small>Quantity</small></div><div class="column width30"><span class="prices">Unit Price:<span class="UNITPRICE"></span><br />Total Price:<span class="TOTALPRICE"></span><br /><a href="#" id="RemoveProduct(".row'+(i)+'");">Remove</a></span></div>');    
    $('#OrderProducts').append(adding);

    adding.find("#PRODUCTNAME").autocomplete("orders.cs.asp?Process=ListProducts", {
        selectFirst: false
    }).result(function(event, data, formatted) {
        if (data) {
            adding.find(".UNITPRICE").html(data[1]);
            adding.find(".PRODUCTID").val(data[2]);
            adding.find(".TOTALPRICE").html(data[1] * $('.UNITQUANTITY').val()); 
        }
    });

    return false;
});


            <div id="OrderProducts">
                <a href="#" id="AddProduct"><img src="icons/add.png" alt="Add" /></a>
            </div>  

Answer 1

You function seems to act on the result of the auto complete so since the .UNITQUANTITY may not have been set it will not get anything other then 0 unless you put a value in for the UNITQUANTITY before you select from the auto complete. But you would need to leave that function as it but possibly add a default of 1 to the UNITQUANTITY then add another function handling the event that the UNITQUANTITY value has changed then do the last line of that inline function and you should have the results you want.

I would suggest adding the following right before your return false;

adding.find(".UNITQUANTITY").change(function()
  {
    adding.find(".TOTALPRICE").html(adding.find(".UNITPRICE").val() * adding.find(".UNITQUANTITY").val()); 
  });

Also edit your inline function to do the following…

adding.find(".UNITPRICE").html(data[1]);
adding.find(".UNITPRICE").val(data[1]);
adding.find(".PRODUCTID").val(data[2]);
adding.find(".TOTALPRICE").html(data[1] * $('.UNITQUANTITY').val()); 
    

Your first line was setting the html of the unit price but not the val so when we tried to retrieve with the .val() it returned 0

Also as a note you should consider adding some round to 2 decimal places to make sure you don’t end up with too many decimals for a total price.

Unit Price:50.99

Total Price:2804.4500000000003