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

Popular posts from this blog

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

unicode - Are email addresses allowed to contain non-alphanumeric characters? -