如何在单击 Drupal 表单提交按钮时禁用它以防止重复提交？答案

【问题标题】：How can I disable a Drupal form submit button when it is clicked to prevent double submission?如何在单击 Drupal 表单提交按钮时禁用它以防止重复提交？
【发布时间】：2010-12-17 17:29:34
【问题描述】：

听起来是个简单的问题。我添加了一些 jQuery 魔法：

$("#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 看到了这个问题，但我担心这似乎是一个非常老套的修复方法，应该有更好的方法。

【问题讨论】：

我还为您链接的问题添加了一个答案（我认为）一个不那么老套的解决方案。
可能因为按钮在点击时被禁用而没有被调用。我下面的解决方案使用 setTimeout at 1ms 来解决这个问题。

标签： jquery drupal drupal-fapi

【解决方案1】：

或者您可以这样做，作为 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);',
  ),
);

【讨论】：

【解决方案2】：

我认为您绑定到按钮的单击事件这一事实意味着该按钮在单击事件可以冒泡到表单并导致提交之前被禁用。

我们的团队发现，禁用提交按钮几乎总是会给 Internet Explorer 带来问题。我们制作了一个小插件来解决这个问题；在此处查看代码：https://stackoverflow.com/a/4473801/4376

【讨论】：

感谢您的解决方案。我建议使用 bind 而不是 live，因为 live 已被弃用。
@Roger - 实际上on() 是更新版本。 bind 也已被弃用，并且与 live 或 on 不同，它仅适用于调用时页面上的元素。相应地更正了。
哦，我明白了。谢谢内森！

【解决方案3】：

我今天下午用这种方式修复了它，并且能够毫无问题地获得提交的表单信息：

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

【讨论】：

【解决方案4】：

只需隐藏您的提交按钮 (display:none)，并显示另一个已禁用的按钮。我认为它比解决这个问题的其他解决方案更简单。我的页面上通常只有 2 个按钮，一个可见，一个不可见，而 onClick，只需将它们切换起来。

问题是因为禁用的按钮不会触发回发。

【讨论】：