Quiero calcular automáticamente la tarifa de extracción, el valor estimado y el número de vehículos después de ingresar un valor en el tonelaje.
Usé un modal Bootstrap para esto, pero tan pronto como puse un valor en tonelaje, no funciona. Estoy confundido ahora mismo.
$(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>El problema principal es que no redondeas el resultado de tonnage / 20 , por lo que obtienes una fracción de un vehículo, p. 21 toneladas = 1.05 vehículos, en lugar de encontrar hasta el número entero más cercano, por ejemplo. 21 toneladas = 2 vehículos. Esto se puede lograr usando Match.ceil() .
Además, tenga cuidado con las conversiones de tipo implícito de cadena a int/floats. Es mejor ser explícito con esto, como en el siguiente ejemplo:
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>