Tengo una página de pedido donde necesito obtener todos los precios de los productos y aplicar algunos cálculos para averiguar el precio final. Hice todos estos cálculos y mostré los resultados allí usando el evento de clic de botón por jQuery.
Pero cada vez que actualizo los campos de entrada, necesito hacer clic en el botón para actualizar el resultado calculado previamente y mostrar uno nuevo.
¿Cómo puedo hacer esto sin hacer clic en el botón? Si ocurriera algún cambio en todo el contenido, necesito activar el clic del botón automáticamente.
Si es posible hacerlo a través de Ajax, ¿pueden ayudarme?
Encuentre mi código jQuery actual que figura a continuación.
//Update data corresponding to change in value of days field $(document).on('change', '#order-edit-extracost', function(e) { var days = $('#order-edit-extracost').val(); var cost = (parseFloat(days) * 0.5).toFixed(2); $('#order-edit-extracost-sum').val(cost); }) // Order page Price calculations $(document).on('click', '#calculate-cost', function(e) { var prev_cost = $('.total-prev').html(); var prev_cost_float = parseFloat(prev_cost.match(/-?(?:\d+(?:\.\d*)?|\.\d+)/)[0]); var wastetype_sum = 0; //find sum of all wastetype rows $( '.order-wastetypeRow' ).each(function( index ) { var wastetype_price = $(this).find('#order-edit-wasteprice').val(); prev_cost_float = parseFloat(prev_cost_float) + parseFloat(wastetype_price); }); //calculate VAT and add it to the sum var extra_cost = $('#order-edit-extracost-sum').val(); var final_cost = (parseFloat(prev_cost_float) + parseFloat(extra_cost)).toFixed(2); $('.est-cost').html("CHF "+final_cost); var vat_in_float = parseFloat(final_cost); var vat_amount = (vat_in_float * 0.077).toFixed(2); $('.final-vat').html("CHF "+vat_amount); var total = (parseFloat(final_cost) + parseFloat(vat_amount)).toFixed(2); //show calculated costs $('.final-amount').html("CHF "+total); $('#finalcost-layout').show(); $('.submit-cost').show(); });De acuerdo, antes que nada solo quiero señalar que hay una forma mucho más conveniente de adjuntar detectores de eventos a elementos en jQuery. Al igual que:
$("#order-edit-extracost").change(function(){ }); $("#calculate-cost").click(function(){ });Ahora, para responder a su pregunta, como dijo @freedomn-m, Ajax es generalmente para hacer llamadas a un servidor/servicio. Lo que quieres se puede lograr sin ella. En primer lugar, debe hacer una función que haga el cálculo, así:
function calculateTotal() { var prev_cost = $('.total-prev').val(); var prev_cost_float = parseFloat(prev_cost.match(/-?(?:\d+(?:\.\d*)?|\.\d+)/)[0]); var wastetype_sum = 0; //find sum of all wastetype rows $( '.order-wastetypeRow' ).each(function( index ) { var wastetype_price = $(this).find('#order-edit-wasteprice').val(); prev_cost_float += parseFloat(wastetype_price); }); //calculate VAT and add it to the sum var extra_cost = $('#order-edit-extracost-sum').val(); var final_cost = (parseFloat(prev_cost_float) + parseFloat(extra_cost)).toFixed(2); $('.est-cost').html("CHF "+final_cost); var vat_in_float = parseFloat(final_cost); var vat_amount = (vat_in_float * 0.077).toFixed(2); $('.final-vat').html("CHF "+vat_amount); var total = (parseFloat(final_cost) + parseFloat(vat_amount)).toFixed(2); //show calculated costs $('.final-amount').html("CHF "+total); $('#finalcost-layout').show(); $('.submit-cost').show(); }; A continuación, para adjuntar los campos de entrada a la función, puede agregar el atributo oninput a la sintaxis HTML, así:
<input class="total-prev" type="text" oninput="calculateTotal()"/> O bien, puede usar un selector que sea común a los elementos, como la class , y adjuntar el detector de eventos de input recorriéndolos. Al igual que:
$('.input').map(function() { $(this).on('input', calculateTotal); }); Lo que hará el evento de input es que se activará cada vez que se ingrese algo en el campo.
puede agregar la siguiente función de activación dentro del método de evento de cambio.
$( "#calculate-cost" ).trigger( "click" );como abajo
$(document).on('change', '#order-edit-extracost', function(e) { var days = $('#order-edit-extracost').val(); var cost = (parseFloat(days) * 0.5).toFixed(2); $('#order-edit-extracost-sum').val(cost); $( "#calculate-cost" ).trigger( "click" ); });