Preventing multiple clicks of submit button
bacon333 - June 14, 2006 - 17:56
I've looked around for a solution and found the spam module. However, I'm looking for something that will prevent it from the start.
The problem:
I can go into the comment section of an article, write a comment, and click the "Submit Comment" button 20 times and it'll post 20 times.
Is there a way to disable the submit button after the first click? or nullify the submission if it were clicked more than once? I'm thinking there should be an easy solution to this since no one else seems to have this problem.
Any help would be appreciated.
Let me see...
Let's see...
on this comment, i clicked the submit button 20 times but only one post came up. how was this done?
FWIW, In the past, when I
FWIW,
In the past, when I worked with HTML directly, I used to attach to my submit buttons 'onclick' events which disabled them.
Somthing like this:
<input type="submit" ... onclick="this.disable = true" />Now, let's think. Perhas you can also do:
<input type="submit" ... onclick="this.value='Wait...'; this.disable = true" />thanks for your reply. I've
thanks for your reply.
I've seen fixes like that, along with some cgi ones but that would involve me editing the module.
If you try to post a comment on this page, after you preview, and keep clicking the "submit comment" button, it only posts once without having to disable the button. I want to know how to do that =) It's gotta be right under my nose...
under the hood
A quick peek shows me something I expected:
<input type="hidden" name="edit[form_token]" id="edit-form_token" value="c16338a617a8ae7b33354832f6733ca7" />I don't know where it does it or exactly how, but I can make a damn good guess at what that's doing.
I don't recall seeing it on my site code however, maybe it's from a contrib.
.dan.
http://www.coders.co.nz/
Hm. Interesting...anyone
Hm. Interesting...anyone know more about this?
No, It's part of core. This
No, It's part of core. This long hex number is the session ID, and it's used to make sure no one it trying to hack the website.
Oh, please don't ban me...
I was just trying to verify that this claim is correct, that you can't hit the send button here on drupal.org twenty times.
Well, it isn't true ;-)
Sorry...
I hope the moderators won't revoke my membership...
No, It's part of core. This
No, It's part of core. This long hex number is the session ID, and it's used to make sure no one it trying to hack the website.
I'll leave these two
That's enough for illustration purposes, me thinks :D
--
The Manual | Troubleshooting FAQ | Tips for posting | Make Backups! | Consider creating a Test site.
submit_once.module
Here's a tiny module I wrote to do exactly that. It disables the submit button after you click it. I wrote it just for fun. It isn't very sexy.
Installation
<?php
define('DEFAULT_WAIT_MSG', ' (Wait...)');
function submit_once_help($section = '')
{
switch ($section) {
case 'admin/modules#description':
return t('Disable submit buttons after one click.');
}
}
function submit_once_form_alter($form_id, &$form)
{
foreach (element_children($form) as $name) {
if ($form[$name]['#type'] == 'submit') {
if (!isset($form[$name]['#attributes']))
$form[$name]['#attributes'] = array();
$form[$name]['#attributes']['onclick'] =
"this_btn=this;this.value+='".DEFAULT_WAIT_MSG."';setTimeout('this_btn.disabled=true',0)";
}
}
}
?>
Arghhh... bad news: this
Arghhh... bad news: this javascript trick doesn't work in Mozilla. So this module is useless, as-is. But I know how to fix it: instead of disabling the button, the Javascript code should use a flag variable. If anyone is intereseted in a fix, let me know.
I am VERY interested in a
I am VERY interested in a fix =P.
wow you were able to get more than one post in, i tried a few times and couldn't do it.
Here's the fixed
Here's the fixed module.
<?php
function submit_once_help($section = '')
{
switch ($section) {
case 'admin/modules#description':
return t('Disable submit buttons after one click.');
}
}
function submit_once_form_alter($form_id, &$form)
{
_submit_once_alter_submit_buttons($form);
}
function _submit_once_alter_submit_buttons(&$form)
{
static $counter = 1;
$disabling_method = variable_get('submit_once_disabling_method', 'flag_variable');
foreach (element_children($form) as $name) {
if ($form[$name]['#type'] == 'submit')
{
if (!isset($form[$name]['#attributes']))
$form[$name]['#attributes'] = array();
if (!isset($form[$name]['#prefix']))
$form[$name]['#prefix'] = '';
switch ($disabling_method) {
case 'none':
break;
case 'disabled_attr':
$form[$name]['#attributes']['onclick'] .=
";this_btn=this; setTimeout('this_btn.disabled=true',0); return true";
break;
case 'flag_variable':
$form[$name]['#prefix'] .= "<script type='text/javascript'>btn_{$counter}_clicked=0;</script>";
$form[$name]['#attributes']['onclick'] .=
";if (btn_{$counter}_clicked) return false; btn_{$counter}_clicked=1; return true";
break;
}
$counter++;
}
}
}
function submit_once_settings()
{
$form['submit_once_disabling_method'] = array(
'#type' => 'radios',
'#title' => t('Disabling method'),
'#description' => t('The JavaScript method used to disable the submit buttons'),
'#default_value' => variable_get('submit_once_disabling_method', 'flag_variable'),
'#options' => array(
'disabled_attr' => t('Use the HTML "disabled" attribute (the buttons\' text will dim; DOESNT WORK IN MICROSOFT INTERNET EXPLORER)'),
'flag_variable' => t('Use a variable to flag whether the button was pressed (the buttons won\'t change appearance)'),
),
);
return $form;
}
?>
The settings page allows one to choose between two "disabling methods".
The default method, "Use a flag variable...", works in all browsers.
The other method, using HTML's "disabled" attribute, for some mysterious reason don't work in my Internet Explorer. I can't debug it, because I'm running IE under Wine (I'm using Linux) and it's cumbersome, so just don't choose this disabling method. I leave it there for some developer who runs Windows and wants to fix it.
Conflicts with autocomplete
Submit_once is a useful piece of code. However, gives an issue when used in a form with autocomplete field. To elaborate, when a form has an autocomplete field and the user selects an item from the autocomplete match list and hits enter key, submit_once java script also executes (may be because Drupal makes Submit button as default action). This sets btn_clicked variable and hence clicking Submit button does not submit the form!
One liner!
I know editing modules is a no no, but this is what you could do to add this functionality to an existing form in a module:
Add this line:
'#attributes' => array("onclick" => "javascript: this.value='Please Wait...'; this.disabled = true;"),to this array
$form['submitbutton'] = array('#type' => 'submit',
'#value' => t('Submit'),
'#weight' => 1000,
'#attributes' => array("onclick" => "javascript: this.value='Please Wait...'; this.disabled = true;"),
);
That should change the text in the submit button and render it disabled - when clicked.
BlockUI
I made a little module that uses the jQuery blockUI plugin to achieve this. Every time a submit button is clicked it blocks the whole UI and displays "Please wait" (which is the plugin default).
Download it: http://jax.be/blockui-1.0.tgz
BlockUI page: http://malsup.com/jquery/block/
Only on node / comment forms?
Hi Guys,
I have noticed this problem before, in other places too. For example when you are creating terms in a category. If you bash enter a few times it will create as many as you like.
I suggest adding these js files across the board, ie for all forms on the site.
I have tried this out on a site thats in development now and it is working. Can you think of any reason not to do this?
function _blockui_js() {
$path = drupal_get_path('module', 'blockui');
drupal_add_js("{$path}/jquery.blockUI.js");
drupal_add_js("{$path}/blockui.js");
}
/*function blockui_nodeapi(&$node, $op, $a3 = null, $a4 = null) {
if($op == 'prepare') {
_blockui_js();
}
}
function blockui_comment(&$a1, $op) {
if($op != 'form') {
_blockui_js();
}
}*/
function blockui_menu() {
_blockui_js();
}
Cheers
Rob
Drupal 6 compatible blockui
Hi, can you update it to drupal 6 compatible module. blockui
It's good idea!
It's good idea!
D6 Version
And here a version that should work with drupal 6 for those that are interested:
http://jax.be/blockui-6.x-1.0.tgz