在jQuery完成之前提交表單修改表單中的值

Question

以下是我正在嘗試執行的操作：單擊單選按鈕時，我想更新表單中的某些值，並且只有在這些值更新後，纔會提交整個形式。我遇到的問題是，在更新值之前提交表單。

這是我目前（非工作）執行：

<div class="btn-group" data-toggle="buttons"> 
    <label id="label_radio_2_78" class="btn btn-info btn-sm checkbox-padding "> 
     <input onchange="update_transaction(78)" id="radio_2_78" name="ledger_id" value="2" type="radio"> 
     BR 
    </label> 
    <label id="label_radio_3_78" class="active"> 
     <input onchange="switch_ledgers(78, 3)" id="radio_3_78" checked="checked" name="ledger_id" value="3" type="radio"> 
     HP 
    </label> 
</div> 

function switch_ledgers(transactionId, ledgerId) 
{ 
    deactivate_radio(transactionId, ledgerId).done 
    (
     update_transaction(transactionId) 
    ); 
} 

//checks if the clicked radio buttion is active, if so it unchecks it. 
function deactivate_radio(transactionId, ledgerId) 
{ 
    var cb = $('#radio_' + ledgerId + '_' + transactionId + ':checked'); 
    var r = $.Deferred(); 

    if(cb) 
    { 
     cb.prop('checked', false); 
     $('#label_radio_' + ledgerId + '_' + transactionId).removeClass('active'); 
    } 
    return r.resolve(); 
} 

//Submits the form, this function gets called too quickly 
function update_transaction(transactionId) 
{ 
    var form = $("#transaction_" + transactionId); 

    $.ajax({ 
     type: form.attr('method'), 
     data: form.serialize(), 
     url: form.attr('action') 
    }).done(function() 
    { 
     update_balance(); 
     update_total_balance(); 
    }); 
} 

我希望我足夠清楚我想要做什麼。

謝謝！

Answer 1

直截了當，你只需要修復switch_ledgers()以免立即撥打update_transaction()（彼得Herdenborg的答案）。

進一步說，你可以（也應該）：

• 吹掃從deactivate_radio()遞延/諾言，這是完全同步的。
• 在JavaScript中附加事件處理程序，而不是HTML屬性。
• 通過利用jQuery的力量來遍歷DOM，避免繁瑣的ID。

必須有寫代碼一千種方式 - 這裏有一個：

HTML

清除IDS和贊成data-性能

<div class="btn-group" data-toggle="buttons" data-transactionId="78"> 
    <label class="btn btn-info btn-sm checkbox-padding"> 
     <input data-changeHandler="update_transaction" name="ledger_id" value="2" type="radio"> BR 
    </label> 
    <label class="active"> 
     <input data-changeHandler="switch_ledgers" checked="checked" name="ledger_id" value="3" type="radio"> HP 
    </label> 
</div> 

的Javascript onchange=性質

// Attach a generalised change handler to the radio buttons, 
// braching out to a specific function as specified by 
// the button's `data-changeHandler` property. 
$(".btn-group input[type='radio']").on('change', function() { 
    changeHandlers[$(this).data('changeHandler')](this); 
}); 

// Branching above is made simple by specifying 
// the specific change handlers as properties of an object. 
var changeHandlers = { 
    'switch_ledgers': function(button) { 
     $(button).filter(':checked').prop('checked', false).closest("label").removeClass('active'); 
     changeHandlers.update_transaction(button); 
    }, 
    'update_transaction': function(button) { 
     var transactionId = $(button).closest(".btn-group").data('transactionId'), 
      form = $("#transaction_" + transactionId); 
     $.ajax({ 
      type: form.attr('method'), 
      data: form.serialize(), 
      url: form.attr('action') 
     }).done(function() { 
      update_balance(); 
      update_total_balance(); 
     }); 
    } 
} 

現在，修改其他按鈕組中的HTML以遵循上述相同的模式。

Answer 2

在我看來，問題是，你執行update_transaction()當你實際上是試圖把它作爲的.done()回調函數：

function switch_ledgers(transactionId, ledgerId) 
{ 
    deactivate_radio(transactionId, ledgerId).done 
    (
     update_transaction(transactionId) 
    ); 
} 

應該

function switch_ledgers(transactionId, ledgerId) 
{ 
    deactivate_radio(transactionId, ledgerId).done 
    (
     function() { 
      update_transaction(transactionId) 
     } 
    ); 
} 

如果您沒有通過update_transaction()的論點，您可以只使用

deactivate_radio(transactionId, ledgerId).done(update_transaction); //No() 

但現在您必須將呼叫包裝在匿名函數中以避免立即執行update_transaction()。

Answer 3

它看起來像直接在第一個輸入元素的onchange事件中調用update_transaction（）。

您不應該在change事件中調用switch_ledgers（）嗎？

例如：

<input onchange="switch_ledgers(78)" id="radio_2_78" name="ledger_id" value="2" type="radio">