自動填充計算形式

Question

我有一個<select>的產品中，當選擇一個選項input#price被自動填充與data-price，然後在輸入#quantity輸入數量和最後在輸入#sum是從price*quantity的結果。如何使它改變輸入並選擇？

$('#product').change(function() { 
 
    var price = parseInt($(this).children("option:selected").attr("data-price")); 
 
    $("#price").attr("value", price); 
 
}); 
 

 
$('#quantity').on('input propertychange paste change', function(e) { 
 
    var quantity = $('#quantity').val(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="product"> 
 
     <option value="1" data-price="100">Product 1</option> 
 
     <option value="2" data-price="200">Product 2</option> 
 
     <option value="3" data-price="300">Product 3</option> 
 
    </select> 
 
<input type="text" id="price" value="" readonly> 
 
<input type="number" id="quantity" min="1" max="9999999" step="1"> 
 
<input type="text" id="sum" readonly="">

Answer 1

添加一個額外的 「計算總」 的功能，並從兩個事件處理程序調用它。無論何時更改，總數都會更新。

$('#product').change(function() { 
 
    var price = parseInt($(this).children("option:selected").data("price")); 
 
    $("#price").val(price); 
 
    calcTotal(); 
 
}); 
 

 
$('#quantity').on('input propertychange paste change', function(e) { 
 
    calcTotal(); 
 
}); 
 

 
function calcTotal() { 
 
    var price = $('#price').val() || 0; 
 
    var qty = $('#quantity').val() || 0; 
 
    var total = price * qty; 
 

 
    $('#sum').val(total); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="product"> 
 
    <option value="1" data-price="100">Product 1</option> 
 
    <option value="2" data-price="200">Product 2</option> 
 
    <option value="3" data-price="300">Product 3</option> 
 
</select> 
 
<input type="text" id="price" value="" readonly> 
 
<input type="number" id="quantity" min="1" max="9999999" step="1"> 
 
<input type="text" id="sum" readonly="">

Answer 2

if ($("#quantity").val() > 0) 
{ 
    $("#sum").val(parseInt(quantity, 10) * parseInt($("#price").val(),10)); 
} 

添加以下行。它會將數量與價格相乘，並將其設置爲總和輸入。

$('#product').change(function(){ 
 
    var price = parseInt($(this).children("option:selected").attr("data-price")); 
 
    $("#price").attr("value",price); 
 
    $("#quantity").trigger("input"); //this line will update any reflections to the change in product. 
 
}); 
 

 
$('#quantity').on('input propertychange paste change', function(e) { 
 
    var quantity = $('#quantity').val(); 
 
    if ($("#quantity").val() > 0) 
 
    { 
 
     $("#sum").val(parseInt(quantity, 10) * parseInt($("#price").val(),10)); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="product"> 
 
    <option value="1" data-price="100">Product 1</option> 
 
    <option value="2" data-price="200">Product 2</option> 
 
    <option value="3" data-price="300">Product 3</option> 
 
</select> 
 
<input type="text" id="price" value="" readonly> 
 
<input type="number" id="quantity" min="1" max="9999999" step="1"> 
 
<input type="text" id="sum" readonly="">

Answer 3

要捕捉的quantity值，你可以使用blur方法。當用戶從輸入框中移除焦點時，將調用blur函數，並計算總和。

此外，您可以創建一個模塊displaySum方法來獲取值price和quantity輸入並更新sum輸入。

$('#product').change(function(){ 
 
    var price = parseInt($(this).children("option:selected").attr("data-price")); 
 
    $("#price").attr("value",price); 
 
    displaySum(); 
 
}); 
 

 
$('#quantity').on('blur', function(e) { 
 
    displaySum(); 
 
}); 
 

 
function displaySum() { 
 
    let price = parseInt($('#price').val()); 
 
    let quantity = parseInt($('#quantity').val()); 
 
    if(isNaN(price)) { price = 0; } 
 
    if(isNaN(quantity)) { quantity = 0; } 
 
    let sum = price * quantity; 
 
    $('#sum').val(sum) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="product"> 
 
    <option value="1" data-price="100">Product 1</option> 
 
    <option value="2" data-price="200">Product 2</option> 
 
    <option value="3" data-price="300">Product 3</option> 
 
</select> 
 
<input type="text" id="price" value="" readonly> 
 
<input type="number" id="quantity" min="1" max="9999999" step="1"> 
 
<input type="text" id="sum" readonly="">