Question

订单页面有一部分，用户可以在其中添加新字段以添加新产品。他们从下拉菜单中选择产品，其价格写在另一栏中。我需要添加一项功能，允许用户输入数量，一旦数量变化，总价格就会更新。我尝试使用以下代码，但总价格为0。

我的代码。

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

你的功能似乎是对自动完成的结果起作用所以因为.UNITQUANTITY可能没有被设置，除非你在从自动完成中选择之前为UNITQUANTITY输入一个值，否则它将不会获得除0之外的任何其他内容。但你需要保留该函数，但可能会向UNITQUANTITY添加一个默认值1，然后添加另一个处理UNITQUANTITY值已更改的事件的函数，然后执行该内联函数的最后一行，你应该得到你想要的结果

我建议您在返回false之前添加以下内容;

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

同时编辑内联函数以执行以下操作...

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());

您的第一行是设置单价的html而不是val，所以当我们尝试使用.val（）检索它时返回0

另外作为一个注释，你应该考虑添加一些圆形到2位小数，以确保你不会得到太多的小数总价格。

单价：50.99

总价格：2804.4500000000003

乘以两个字段

1 个答案: