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

【问题标题】：Fetch values from 2 fields and show multiplication in third field从 2 个字段中获取值并在第三个字段中显示乘法
【发布时间】：2017-11-02 14:47:16
【问题描述】：

我有一个表格，其中包括产品名称下拉列表、数量字段和金额字段。我想在选择产品名称时从数据库中获取价格，并且当输入的数量想要在总金额字段中显示所选产品的价格和数量的乘积时。我想使用 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>

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

jquery：

$('#orderedproduct','#productqty').change(function(){
    var oproductname = $(this).val();
    $.ajax(
            type:'POST';
            data:{oproductname:oproductname},
            url:'ajax pages/amount.php',
            success:function(data){
                $('#orderedamount').val(data);
    }
});
});

【问题讨论】：

我们会提供帮助，当您提供不起作用的代码时，而不是当您希望我们为您编码时
你可以用 javascript 或 jquery 来做。先尝试一些代码，如果您的代码不起作用，请寻求帮助
@geeth 我已经完成了这个 jquery，但我是新手，所以我不太了解。
@geeth 当我这样做时，其他 jquery 被禁用。
查看我的答案

标签： javascript php jquery mysql

【解决方案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 );
    }

});

【讨论】：

我想在选择产品时获取所选产品的价格。如何包含外部 php、sql 代码文件以获取选定的产品价格？
当您获取产品详细信息时，它可能包含其价格。我编辑了我的代码。看看吧
兄弟，它没有得到总量。检查小提琴：jsfiddle.net/iamtriples/4hdm433h
看起来你的 jquery 事件没有触发。你加载了jquery文件吗
最后一件事我正在使用按钮添加相同的多行。所以它不适用于第二、第三行

【解决方案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">

【讨论】：