javascript - How to used jquery in a calculation

Question

I want the show the amount value using JQuery.

I have used jAutoCalc() but it seems to be unsuitable with my format where some of the amount is fixed. I looked at this link https://forum.jquery.com/topic/calculation-on-form-fields but there is still something wrong which the amount changed after I changed the dayhour.

$(document).ready(function() {
  var repeat = '<tr><td><input class="form-control"  name="dayhour[]" type="number" id="dayhour" ></td><td><select class="form-control" name="wagetype[]" type="text" id="wagetype" onchange="calc(this)" ><option value="-----" id="-----" hidden>-----</option><option value="Normal days - OT" id="Normal days - OT">Normal days - OT</option><option value="Public Holidays - OT" id="Public Holidays - OT">Public Holidays - OT</option><option value="Attendance Allowance" id="Attendance Allowance">Attendance Allowance</option></select></td><td><input class="form-control"  name="rate[]" type="double" id="rate"  readonly ></td><td><input class="form-control"  name="amount[]" type="double" id="amount" readonly></td><td><input class="btn btn-danger" type="button" name="add" id="remove" value="remove"></td></tr>';
  $("#add").click(function() {
    $("#table_field").append(repeat);
  });

  $("#table_field").on('click', '#remove', function() {
    $(this).closest('tr').remove();
  });
});

function calc(el) {
  //get num1 field value
  var num1 = parseFloat($(el).closest('tr').find('[name*=dayhour').val());
  var amount;
  var rate;
  $('#amount').val(amount);
  //compare
  if (el.value == "Normal days - OT") {
    rate = 10.00;
    amount = rate * num1;
  } else if (el.value == "Public Holidays - OT") {
    rate = 20.00;
    amount = rate * num1;
  } else if (el.value == "Attendance Allowance") {
    rate = 200.00;
    amount = 200.00;
  }
  $('#num1').change(calc);
  $(el).closest('tr').find('[name*=rate]').val(rate);
  $(el).closest('tr').find('[name*=amount]').val(amount);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="insert-form" name="table_field">
  <table class="table table-bordered" id="table_field">
    <tr>
      <th>dayhour</th>
      <th>wagetype</th>
      <th>Rate</th>
      <th>Amount</th>
      <th>Add or Remove</th>
    </tr>
    <tr>
      <td><input class="form-control" name="dayhour[]" type="number" id="dayhour"></td>
      <td>
        <select class="form-control" name="wagetype[]" type="text" id="wagetype" onchange="calc(this)">
          <option value="-----" id="-----" hidden>-----</option>
          <option value="Normal days - OT" id="Normal days - OT">Normal days - OT</option>
          <option value="Public Holidays - OT" id="Public Holidays - OT">Public Holidays - OT</option>
          <option value="Attendance Allowance" id="Attendance Allowance">Attendance Allowance</option>
        </select>
      </td>
      <td><input class="form-control" name="rate[]" type="double" id="rate" readonly></td>
      <td><input class="form-control" name="amount[]" type="double" id="amount" readonly></td>
      <td><input class="btn btn-warning" type="button" name="add" id="add" value="add"></td>
    </tr>
  </table>
</form>

标签： javascriptjquery