autofilled calculé sous forme

Question

I ont une <select> avec des produits, lorsqu'une option est sélectionnée, la input#price est autofilled avec le data-price, puis saisir la quantité en entrée #quantity et enfin à l'entrée #sum est le résultat de price*quantity. Comment faire en somme en changeant les entrées et sélectionner?

$('#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

Ajouter une fonction supplémentaire "calculer le total", et appellent des deux gestionnaires d'événements. Le total sera mis à jour chaque fois que l'un d'eux est modifié.

$('#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)); 
} 

ajoutez la ligne suivante. Il va multiplier la quantité avec le prix et le mettre à l'entrée de la somme.

$('#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

Pour capturer la valeur de quantity, vous pouvez utiliser la méthode blur. Lorsque l'utilisateur supprime le focus de la zone de saisie, la fonction blur est appelée et la somme est calculée.

En outre, vous pouvez créer une méthode pour obtenir le module displaySum la valeur de l'entrée price et quantity et mettre à jour l'entrée 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="">