jquery - 如何在单击 Drupal 表单提交按钮时禁用该按钮以防止重复提交？

Question

听起来是一个简单的问题。我添加了一些 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 看到了这个问题，但我担心这似乎是一个非常棘手的修复，应该有更好的方法。

Answer 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);',
  ),
);