on change in jquery doesnt work with readonly input field-CodePudding

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"  id="client_type" required name="price[]">
<input type="text"  id="client_type" required name="price[]">
<input type="text"  id="client_type" required name="price[]">
<input type="text"  id="subtotal" required name="subtotal" readonly>
<input type="text"  id="cgst" required name="cgst" readonly>
<input type="text"  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

CodePudding user response：

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"  id="client_type" required name="price[]">
<input type="text"  id="client_type" required name="price[]">
<input type="text"  id="client_type" required name="price[]">
<input type="text"  id="subtotal" required name="subtotal" readonly>
<input type="text"  id="cgst" required name="cgst" readonly>
<input type="text"  id="sgst" required name="sgst" readonly>

CodePudding user response：

Just delegate from the nearest container and do the calculations each time

Not sure why you need $(".qty2").each() since you only have one field with that class

Its ID is client_type and the name is price[] - perhaps be more consistent in your naming too?

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

$("#container").on("input", function() {
  let total = 0;
  $(".qty2").each(function() {
    const val =  $(this).val();
    total  = val; 
    const $div = $(this).closest("div");
    let subt = (val * 9 / 100).toFixed(2)
    $div.find(".subtotal").val(subt)
    $div.find('.cgst').val(subt);
    $div.find('.sgst').val(subt);
  });
  $("#total").html(`$${total.toFixed(2)}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div>
    <input type="text"  required name="price[]">
    <input type="text"  required name="subtotal[]" readonly>
    <input type="text"  required name="cgst[]" readonly>
    <input type="text"  required name="sgst[]" readonly>
  </div>
  <div>
    <input type="text"  required name="price[]">
    <input type="text"  required name="subtotal[]" readonly>
    <input type="text"  required name="cgst[]" readonly>
    <input type="text"  required name="sgst[]" readonly>
  </div>
</div>
Total <span id="total"></span>