Preventing multiple form submissions (revisited)

Submitted by litrik on

In an earlier post I explained how I used the BlockUI jQuery plugin to prevent multiple form submissions because I couldn't get it to work by simply setting the disabled attribute of the submit buttons.

Tim Esselens left a comment on the original post and during the subsequent email conversation we discussed the possibility of cloning and hiding the submit button to make sure its value gets sent to the server.

In the meantime I also discovered some problems with the BlockUI jQuery plugin in IE6. Opacity does not work in IE so the overlay drawn by BlockUI is really ugly.

I went back to the idea of using the disabled attribute and combined it with Tim's suggestion. The end result is the following jQuery snippet which works in Firefox and Internet Explorer (tested in IE 6.0):

$(":submit").click(function() {
  $(this).clone().insertAfter($(this)).attr("disabled","true");
  $(this).hide();
});

Topic: 

3 Comments

This is a really good

Submitted by ben on

This is a really good solution for fixing the input button problem. The only issue I've seen is the cloned button still listens to the Enter key (at least in Firefox), so if you hammer on Enter in one of the form fields, you can still make it double-submit. This might be an extreme edge case though, and not worth worrying too much about.

this is really a good

Submitted by Anonymous on

this is really a good solution which worked grt8 in ie as well as firefox ....and it will be gr8 if this solution cud be extended for all bustton in page . i mean once u click on any button all button sud get disabled .

Add new comment