Question

我有一个表格，其中包括产品名称下拉列表，数量字段＆amp;金额领域。我想在选择产品名称时从数据库中获取价格，并且当输入的数量想要在总金额字段中显示所选产品的价格和数量的乘积时。我想使用Jquery。

形式的图像：

这是我的代码：

public List<DVD> displayDVDsInCategory(String category) {
    List<DVD> result = new ArrayList<>();
    for (int i = 0; i < arraylist.size(); i++) {
        if(category.equalsIgnoreCase(arraylist.get(i).getCategory())) {
           result.add(arraylist.get(i));
        }
    }
    return result;
}

任何帮助将不胜感激。谢谢。

Jquery的：

<div class="section row mb10" style="">
  <label for="ordered-product" class="field-label col-md-2 text-center"><i class="fa fa-product"></i></label>
  <div class="col-md-3">
     <label class="field select">
            <select name="orderedproduct[]" id="orderedproduct">
              <option>Select Ordered Product</option>
                <?php
                $query="SELECT * FROM product_list";
                $res=mysql_query($query) or die(mysql_error());
                while($row=mysql_fetch_array($res)){
                echo "<option value='". $row['product_id'] ."'>" .$row['product_name'] ."</option>" ;
                      }
                ?>
            </select>       
      </label>
  </div>
  <label for="product-qty" class="field-label col-md-1 text-center"><i class="fa fa-cubes"></i></label>
  <div class="col-md-2">
    <label for="product-qty" class="field prepend-icon">
    <input type="text" name="productqty[]" id="productqty" class="gui-input" placeholder="Quantity">
    </label>
  </div>
  <label for="order-amount" class="field-label col-md-1 text-center"><i class="fa fa-inr"></i></label>
  <div class="col-md-2">
    <label for="order-ammount" class="field prepend-icon">
      <input type="text" name="orderammount[]" id="orderammount" class="gui-input" disable placeholder="Total Amount">
    </label>
   </div>
</div>

Answer 1

不需要使用ajax来执行此乘法。如果您出于其他原因使用它，您可以继续这样做。否则，以下代码将起作用。

您未在任何地方列出产品价格。因此，请更改您的选择选项，如下所示：

echo '<option value='". $row['product_id'] ."' data-price="'.$row['product_price'].'">' .$row['product_name'] .'</option>' ;


$(document).on('change, focusout', '#orderedproduct,#productqty', function(){
    var oproductname = $(this).val();
    var productQty = parseInt($('#productqty').val());
    var productPrice = parseFloat($('#orderedproduct').find(':selected').data('price'));
    var totalAmount = productQty * productPrice ;
    if(!isNaN(totalAmount)) { 
        $('#orderedamount').val(totalAmount );
    }

});

Answer 2

我不知道，但我希望这应该有用

$('#qty').keyup(function () {
		var price = $('.price').val();
    var qty = $('#qty').val();
   
    var total = price * qty;
    $('#total').val(total);
     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="price" placeholder="Product Price">
<input type="text" id="qty" placeholder="Product Quantity">
<br><br>
<input type="text" id="total" placeholder="Total">

从2个字段中获取值并在第三个字段中显示乘法

2 个答案: