Multiplying field value with retreived value jQuery

Question

I pull product price from another page. Then I multiply it with quantity entered in the quantity input field. The problem is, if I forget to enter quantity value before I pull product price data or if I change the quantity field later, the final total price is not updated. I hope I clearly explained it.

javascript:

$('#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;
});

$('#RemoveProduct').click(function() {
 $().remove();

 return false;
});

my html:

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

• edit

Now I totaly messed it up. Removing a row is not working anymore as well... Test link: http://refinethetaste.com/html/cp/?Section=orders&Process=AddOrder#

Answer 1

You can do something like this:

 $('input.UNITQUANTITY').blur(function() {
     var $column = $(this).closest('div.column');
     var unit = $column.find('.UNITPRICE').html();
     $column.find('.TOTALPRICE').html(unit * $(this).val());
 });

I'm not sure how your HTML is setup so you might need different traversing techniques, but the idea remains the same (update the field whenever unit quantity changes).

Answer 2

for the remove link you could try this:

<a href="#"  id="row'+i+'");" class="remove">Remove</a></span>

$('a.remove').live('click',function() {
     $('div.'+$(this).attr('id')).remove();
});