如何在前端输入字段的每次更改时自动触发特定按钮单击事件

Question

我有一个订单页面，我需要在其中获取所有产品价格并应用一些计算来找出最终价格。我已经完成了所有这些计算，并通过 jQuery.

使用按钮单击事件显示了结果。

但是每当我更新输入字段时，我都需要单击按钮来更新之前计算的结果并显示新结果。

如何在不点击按钮的情况下完成此操作？如果整个内容发生任何变化，我需要自动触发按钮点击。

如果可以通过 Ajax 完成，你能帮帮我吗？

请在下面找到我当前的 jQuery 代码。

//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();
});

Answer 1

您可以在 on change 事件方法中添加以下触发函数。

$( "#calculate-cost" ).trigger( "click" );

喜欢下面

$(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" );
});

Answer 2

好的，首先我只想指出，有一种更方便的方法可以将事件侦听器附加到 jQuery 中的元素。像这样：

$("#order-edit-extracost").change(function(){
});

$("#calculate-cost").click(function(){
});

现在回答你的问题，正如@freedomn-m 所说，Ajax 通常用于调用 server/service。没有它也可以实现你想要的。所以首先，你应该创建一个函数来进行计算，如下所示：

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();
};

接下来，为了将输入字段附加到函数，您可以将 oninput 属性添加到 HTML 语法，如下所示：

<input class="total-prev" type="text" oninput="calculateTotal()"/>

或者，您可以使用元素通用的选择器，例如 class，并通过遍历它们来附加 input 事件侦听器。像这样：

$('.input').map(function() {
    $(this).on('input', calculateTotal);
});

input 事件将在每次向字段输入内容时触发。

如何在前端输入字段的每次更改时自动触发特定按钮单击事件

How to trigger a particular button click event automatically on each change in front end input field

javascript

ajax

jquery