jquery - multiply two fields -
there 1 section of orders page users can add new fields add new products. choose product drop down menu , price written in column. need add functionality allow users enter quantity amount, , total price updated quantity amount changes. tried following codes keep receiving 0 total price.
my codes.
$('#addproduct').click(function() { var = 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>
you function seems act on result of auto complete since .unitquantity may not have been set not other 0 unless put value in unitquantity before select auto complete. need leave function possibly add default of 1 unitquantity add function handling event unitquantity value has changed last line of inline function , should have results want.
i suggest adding following right before return false;
adding.find(".unitquantity").change(function() { adding.find(".totalprice").html(adding.find(".unitprice").val() * adding.find(".unitquantity").val()); });
also edit inline function 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 setting html of unit price not val when tried retrieve .val() returned 0
also note should consider adding round 2 decimal places make sure don't end many decimals total price.
unit price:50.99
total price:2804.4500000000003
Comments
Post a Comment