Autofilled calculating form

Question

I have a <select> with products, when an option is selected the input #price is autofilled with the data-price , then enter the quantity in the input #quantity and finally in the input #sum is a result from price*quantity . How to make it sum on changing the inputs and select?

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

Add an additional "calculate total" function, and call it from both event handlers. The total will update whenever either is changed.

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

To capture the value of quantity , you can use blur method. When ever user removes focus from the input box, the blur function will be called and sum will be calculate.

Also, you can create a module displaySum method to get the value of price and quantity input and update the sum input.

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

Answer 3

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

add the following line. It will multiply the quantity with the price and set it to the sum input.

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