ted serbinski – entrepreneur & web architect

How to prevent duplicate posts?

So one of the problems with Drupal (and well just about any other website out there) is the fact that it is quite easy to post forms more than once. Why do you think ecommerce sites take such huge precautions for preventing multiple form submissions?

In the case of Drupal, this can be quite annoying, especially for those running sites with huge user bases, all of which have varying speeds of internet connections and all of whom like to click that “submit” button more than once.

Can this be fixed? You bet, have a look at this issue I’ve created. It points out the fact that there exists a contributed module that prevents duplicate form submissions, so why can’t this be built into core? Now that core supports tokens for forms as of 4.7.4, this would make such a patch all that much easier. Add in some logic to keep track of these tokens for each user’s session and then hopefully no duplicate postings. However, easier said than done—have you ever looked at the code in form.inc? Makes my head spin! I tried for a while to get a patch to work but no luck. Hopefully someone will fix that soon though :-)

In the mean time, and also to serve as a useful supplement if that patch lands in core, I’ve come up with a jQuery solution that works quite well. Now I know you’re thinking this must be some sort of use of this.disabled=true; but if you’ve thought that, then you’re wrong. This won’t work in Drupal because Drupal relies upon the value of the submit button (e.g., does it say “submit”, “delete”, “preview”, etc.) setting that to disabled causes the value of the button to be submitted as null and then Drupal doesn’t know how to handle the form (works well for simpler systems like Word Press though).

How can we get around this? What if we could just hide the button entirely… so it can’t even be clicked. But that’s not too useful to the user, there should be some feedback, like for instance “Waiting for response…” to let them know the form has been submitted and their browser is waiting for a response.

Here’s the code to do that:

  // don't allow users to post content more than once
  $(document).ready(function() {
    $('input[<code>type=submit]&#039;).click(function() {&#10;      $(this).siblings(&#039;input[</code>type=submit]').hide();
      $(this).hide();
      $('<p class="loading">Waiting for response…</p>').insertAfter(this).slideDown('fast');
    })
  })

What this does is find any submit button, then hides that submit button and any submit buttons next to it (e.g., hiding the “preview”, “submit”, “delete” trio). It then repalces those buttons with some text saying “Waiting for response…”. Add in some nice CSS formatting, along with a CSS background loading image (I recommend a nifty AJAX loading animation ;-)) and presto, no more duplicate forms!

Well, unless the user has JS turned off… but that’s why you should help and make this patch for Drupal happen :-)

posted 11 Jan 2007

Recommended Entrepreneurial Reading on Amazon

9 comments

Eric wrote 2 years 16 weeks ago

Very interesting. Anyway we can still prevent multiple submit via form_single module.

But I want to know more on this. How do we implement this method?

Regards

greggles wrote 1 year 50 weeks ago

Hi Ted,

The input format on this page seems to have eaten the jquery code a bit. Any chance you can reformat it or provide it as an attached file?

Thanks and congrats on the acquisition ;)

Is this right?

$(document).ready(function() {
  $(‘input[type=submit]’).click(function() {(
    $(this).siblings(‘input[type=submit]’).hide();      
    $(this).hide();
    $(’Waiting for response…‘).insertAfter(this).slideDown(‘fast’);    
  });
});

I added it to the bottom of the drupal5.x drupal.js but it doesn’t seem to work. Perhaps you could attach the code in a text file so that the input filter doesn’t alter the code.

ted wrote 1 year 50 weeks ago

Thanks Greg, didn’t realize this post was getting scrunched.

Try it now!

greggles wrote 1 year 50 weeks ago

Thanks a bundle, Ted. It’s working beautifully, now, and my click-happy friend will no longer make double posts.

SEO Services wrote 1 year 37 weeks ago

Thanks Greg, Very interesting post. It’ working beautifully. Again thanks for sharing with us.

Gold wrote 1 year 29 weeks ago

Could you provide please full code to use this?

I`ve added given code in different ways, but it doesn`t work. I`ve used drupal_add_js(”.........”, ‘inline’);

sanatate wrote 1 year 16 weeks ago

Thank you, Ted! No more duplicates.

Caleb G wrote 12 weeks 2 days ago

After using the original code here, I realized that it is too inclusive and causes problems – namely, if there is an upload or imagefield on the page, when the attach button is clicked the JS in the original article will cause the submit button on the node to go away. The solution for this is to make the jQuery more targeted like so:

$(document).ready(function() {
  $('input[type=submit][@value="Post comment"]').click(function() {  
    $('#comment-form :input').hide();
    $('Waiting for response…').insertAfter(this).slideDown('fast');    
  });
});

ted wrote 12 weeks 2 days ago

Ah yes this code is a bit out of date with all the new fancy AJAX like modules adding their own buttons :) Great call Caleb!

Popular content

Recent comments

How to prevent duplicate posts?

9 comments

Add your comment