如何在前端輸入欄位的每次更改時自動觸發特定的按鈕單擊事件

我有一個訂單頁面，我需要在其中獲取所有產品價格并應用一些計算來找出最終價格。我已經完成了所有這些計算，并使用 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();
});

uj5u.com熱心網友回復：

好的，首先我只想指出，有一種更方便的方法可以將事件偵聽器附加到 jQuery 中的元素。像這樣：

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

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

現在回答您的問題，正如@freedomn-m 所說，Ajax 通常用于呼叫服務器/服務。沒有它，你想要的也能實作。因此，首先，您應該創建一個進行計算的函式，如下所示：

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事件的作用是每次向該欄位輸入內容時都會觸發它。

uj5u.com熱心網友回復：

您可以在 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" );
});

標籤：javascript 查询 阿贾克斯

上一篇：如何從ajax過濾下拉串列以顯示帶有名稱的復選框？

下一篇：ajax-為什么onclick不適用于復選框