如何禁用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看到过这个问题,但担心这看起来像是一个非常冒险的修复,应该有更好的方法。
我认为你绑定到按钮的单击事件的事实意味着该按钮被禁用之前,点击事件可以冒泡到表单并导致提交。
我们的团队发现禁用提交按钮几乎总是会为Internet Explorer创建问题。我们制作了一个小插件来解决这个问题。看到代码在这里:https://*.com/a/4473801/4376
我固定它今天下午这样的,能得到与出的问题提交表单信息:
$("#id_of_button").click(function() {
var submit = $(this);
setTimeout(function(){
submit.attr('disabled','disabled')
},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);',
),
);
只是隐藏提交按钮(display:none
),并显示代替已被禁用另一个按钮。我认为它比这个问题的其他解决方案更简陋。我通常只在页面上有两个按钮,一个可见,另一个不可以,onClick,只需将它们切换。
问题是由于禁用的按钮不会触发回发引起的。
我还添加了一个答案,你与(我认为)一个不太冒险的解决方案链接的问题。 – 2010-12-17 18:50:01
由于点击按钮被禁用,可能不会被调用。下面我的解决方案使用1ms的setTimeout来解决这个问题。 – Nick 2013-04-22 10:53:46