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>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>