2つのフィールドから値を取得し、第3フィールドで乗算を表示

Question

商品名ドロップダウン、数量フィールド&量フィールドを含むフォームがあります。商品名を選択したときに、選択した商品の価格と数量を合計金額欄に表示する場合は、データベースから価格を取得します。私は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); 
    } 
}); 
}); 

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() { 
 
\t \t 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">