如何禁用Drupal表單提交按鈕以防止雙擊提交？

聽起來像一個簡單的問題。我已經添加了一點jQuery的魔力：如何禁用Drupal表單提交按鈕以防止雙擊提交？

$("#edit-save").click(function(event) { 
    $(this).attr("disabled", "true"); 
});

但是，一旦這個到位，我的表單提交處理程序不會被調用。

這是我自己的路徑上的自定義窗體中hook_menu定義：

$items['my_form'] = array(
    'title' => 'My form', 
    'page callback' => 'drupal_get_form', 
    'page arguments' => array('mymod_myform'), 
    'type' => MENU_CALLBACK, 
);

在窗體中，我有一個提交按鈕和取消按鈕：

$form['cancel'] = array(
    '#type' => 'submit', 
    '#value' => t('Cancel'), 
); 

$form['save'] = array(
    '#type' => 'submit', 
    '#value' => t('Save'), 
);

，我定義我自己提交處理程序：

$form['#submit'][] = 'mymod_myform_submit';

我已經在drupal_get_form（）函數中放了一些跟蹤代碼來嗅探提交表單時的$ _POST變量。當jQuery的魔術被禁用，$ _ POST變量包括「OP」參數：

Array 
    (
    [op] = Save 
    [form_build_id] => form-6e74c87390e3fc48d0bebd2f5193315b 
    [form_token] => 33db6e34c0350e33c48861a63a38d45f 
    [form_id] => dh_seo_workload_item_form 
)

，但如果我讓jQuery的魔力來禁用它被點擊後提交按鈕，通過「op」參數不再包含在$ _POST數組中，所以Drupal認爲該表單尚未提交。

我在Prevent double submission of forms in jQuery看到過這個問題，但擔心這看起來像是一個非常冒險的修復，應該有更好的方法。

來源

2010-12-17 Mark B

我還添加了一個答案，你與（我認爲）一個不太冒險的解決方案鏈接的問題。 – 2010-12-17 18:50:01

由於點擊按鈕被禁用，可能不會被調用。下面我的解決方案使用1ms的setTimeout來解決這個問題。 – Nick 2013-04-22 10:53:46

我認爲你綁定到按鈕的單擊事件的事實意味着該按鈕被禁用之前，點擊事件可以冒泡到表單並導致提交。

我們的團隊發現禁用提交按鈕幾乎總是會爲Internet Explorer創建問題。我們製作了一個小插件來解決這個問題。看到代碼在這裏：https://stackoverflow.com/a/4473801/4376

來源

2010-12-17 18:41:57

感謝您的解決方案。我建議使用bind而不是live，因爲live已被棄用。 – Roger 2013-07-16 10:17:17

@Roger - 其實'on（）'是更新後的版本。 'bind'也被棄用，與'live'或'on'不同，它只在調用時在頁面上的元素上起作用。相應更正。 – 2013-07-16 15:48:46

哦，我明白了。謝謝Nathan！ – Roger 2013-07-16 16:22:37

我固定它今天下午這樣的，能得到與出的問題提交表單信息：

$("#id_of_button").click(function() { 
    var submit = $(this); 
    setTimeout(function(){ 
    submit.attr('disabled','disabled') 
    },1); 
});

來源

2010-12-17 21:47:31 user546533

或者你也可以做到這一點，作爲一個班輪除了在PHP形式陣列級別...

$form['submit'] = array(
    '#type' => 'submit', 
    '#value' => t('Save'), 
    '#attributes' => array(
    'onclick' => 'javascript:var s=this;setTimeout(function(){s.value="Saving...";s.disabled=true;},1);', 
), 
);

來源

2013-04-22 10:52:33 Nick

只是隱藏提交按鈕（display:none），並顯示代替已被禁用另一個按鈕。我認爲它比這個問題的其他解決方案更簡陋。我通常只在頁面上有兩個按鈕，一個可見，另一個不可以，onClick，只需將它們切換。

問題是由於禁用的按鈕不會觸發回發引起的。

來源

2013-10-09 16:43:54

如何禁用Drupal表單提交按鈕以防止雙擊提交？

回答

相關問題