自动填充计算形式

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="">