Jquery onkeyup not working on boostrap modal. I'm using laravel blade template

Question

I want to auto compute the extract fee, estimated value and num vehicle after I input a value in to tonnage.

I used a Bootstrap modal for this but as soon I put a value in tonnage it doesn't work. I'm confused right now.

$(document).ready(function() {
  $('body').on('keyup', '#tonnage', function() {
    var tonnage = $("#tonnage").val();
    var num_vehicle;
    if (tonnage <= 20) {
      num_vehicle = 1;
      $("#num_vehicle").val(num_vehicle);
    } else {
      num_vehicle = tonnage / 20;
      $("#num_vehicle").val(num_vehicle);
    }

    var total_estimate_value = num_vehicle * 6000;
    $("#estimated_value").val(total_estimate_value);
    var total_extraction_fee = num_vehicle * 6000 * 0.1;
    $("#extraction_fee").val(total_extraction_fee);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="col-md-6"> 
  <label for="inputCity" class="form-label">Volume/Tonnage</label> 
  <input type="text" class="form-control" id="tonnage" name="tonnage"> 
</div>
<div class="col-md-6">
  <label for="inputCity" class="form-label">Extraction Fee</label>
   <input type="text" class="form-control" id="extraction_fee" name="extraction_fee" readonly="">
</div>
<div class="col-md-6">
   <label for="inputCity" class="form-label">Estimated Value</label>
   <input type="text" class="form-control" id="estimated_value" name="estimated_value" readonly="">
</div>
<div class="col-md-6">
   <label for="inputCity" class="form-label">No. of Vehicle</label>
   <input type="text" class="form-control" id="num_vehicle" name="num_vehicle" readonly="">
 </div>

Answer 1

The main issue is because you don't round the result of tonnage / 20, so you get a fraction of a vehicle, eg. 21 tons = 1.05 vehicles, instead of found up to the nearest integer, eg. 21 tons = 2 vehicles. This can be achieved using Match.ceil().

Also, be careful of implicit type conversions from string to int/floats. It's better to be explicit with this, as in the following example:

jQuery($ => {
  $(document).on('keyup', '#tonnage', function() {  
    var tonnage = parseFloat($(this).val());
    var numberOfVehicles = Math.ceil(tonnage / 20);
    $('#num_vehicle').val(numberOfVehicles);
    
    var total_estimate_value = numberOfVehicles * 6000;
    $("#estimated_value").val(total_estimate_value);
    
    var total_extraction_fee = numberOfVehicles * 6000 * 0.1;
    $("#extraction_fee").val(total_extraction_fee);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="col-md-6">
  <label for="inputCity" class="form-label">Volume/Tonnage</label>
  <input type="text" class="form-control" id="tonnage" name="tonnage">
</div>
<div class="col-md-6">
  <label for="inputCity" class="form-label">Extraction Fee</label>
  <input type="text" class="form-control" id="extraction_fee" name="extraction_fee" readonly="">
</div>
<div class="col-md-6">
  <label for="inputCity" class="form-label">Estimated Value</label>
  <input type="text" class="form-control" id="estimated_value" name="estimated_value" readonly="">
</div>
<div class="col-md-6">
  <label for="inputCity" class="form-label">No. of Vehicle</label>
  <input type="text" class="form-control" id="num_vehicle" name="num_vehicle" readonly="">
</div>