在 jquery 中的更改不适用于只读输入字段

Question

i have some fields in my form, which are like below:

 $(document).on("change", ".qty2", function() { var sum1 = 0; $(".qty2").each(function() { sum1 += +$(this).val(); }); $("#subtotal").val(sum1); }); $(document).on("change", "#subtotal", function() { var subt = $("#subtotal").val(); var tot_price = (subt * 9 / 100); var divobj = document.getElementById('cgst'); var divobj1 = document.getElementById('sgst'); divobj.value = tot_price; divobj1.value = tot_price; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="form-control price qty2" id="client_type" required name="price[]"> <input type="text" class="form-control price qty2" id="client_type" required name="price[]"> <input type="text" class="form-control price qty2" id="client_type" required name="price[]"> <input type="text" class="form-control qty1" id="subtotal" required name="subtotal" readonly> <input type="text" class="form-control qty1" id="cgst" required name="cgst" readonly> <input type="text" class="form-control qty1" id="sgst" required name="sgst" readonly>

here apart from the first input field 'price', all other 3 are readonly, when user enters something in price field, that value is taken to subtotal, and from there i need to calculate sgst and cgst and display it in their respective fields, however in my code only till subtotal display is working, can anyone please tell me how to fix this, thanks in advance

Answer 1

Here is a rewrite of YOUR script using YOUR html

If you have SETS of fields, wrap each set in a div and use .closest("div").find(".otherfield") to make this work in for example a shopping list

 const $qty = $(".qty2").on("input", () => { // cache the fields let total = $qty .map((i, fld) => +fld.value) .get() .reduce((a, b) => a + b); let tot_price = (total * 9 / 100).toFixed(2); $("#subtotal").val(total); $('#cgst').val(tot_price); $('#sgst').val(tot_price); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="form-control price qty2" required name="price[]"> <input type="text" class="form-control price qty2" required name="price[]"> <input type="text" class="form-control price qty2" required name="price[]"> <input type="text" class="form-control qty1" id="subtotal" name="subtotal" readonly> <input type="text" class="form-control qty1" id="cgst" name="cgst" readonly> <input type="text" class="form-control qty1" id="sgst" name="sgst" readonly>

Answer 2

just comment on change event on #Subtotal lines in your code and you are good to go.

 $(document).on("change", ".qty2", function() { var sum1 = 0; $(".qty2").each(function() { sum1 += +$(this).val(); }); $("#subtotal").val(sum1); // }); // $(document).on("change", "#subtotal", function() { var subt = $("#subtotal").val(); var tot_price = (subt * 9 / 100); var divobj = document.getElementById('cgst'); var divobj1 = document.getElementById('sgst'); divobj.value = tot_price; divobj1.value = tot_price; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="form-control price qty2" id="client_type" required name="price[]"> <input type="text" class="form-control price qty2" id="client_type" required name="price[]"> <input type="text" class="form-control price qty2" id="client_type" required name="price[]"> <input type="text" class="form-control qty1" id="subtotal" required name="subtotal" readonly> <input type="text" class="form-control qty1" id="cgst" required name="cgst" readonly> <input type="text" class="form-control qty1" id="sgst" required name="sgst" readonly>