Best practise for disabling submit button using JavaScript

JavaScript
1

Hi,

I have a simple PHP form and to prevent double data submission, once the user has clicked ‘submit’, I want to disable the submit button using JavaScript.

It was recommended in another thread that one could accomplish this using jQuery and the following code:

$('input[type="submit"]').click( function() { $(this).attr('disabled','disabled'); } );

However, I also read that some browsers don’t like having the submit button disabled, and that a more “elegant” way to do things would be:

<form .. .. onsubmit="if (this.getAttribute('submitted')) return false; this.setAttribute('submitted','true');">

Ignoring the inline js for a minute, does the second method have any (dis)advantages over the first.

Does anybody have another method they use to achieve the same thing?

Thanks in advance.

2

That was me who gave you the code and indeed I had it the wrong way around. You shouldn’t disable the button onclick, but on form submit. If you disable the button onclick IE won’t submit the form anymore (all other browsers will though, in case you’re interested).

This should work you have jQuery


$("form").submit( function() { $(":input[type=\\'submit\\']").attr("disabled","disabled"); });

My bad, sorry :blush:

Your code should also work. I’ve never seen that approach; looks interesting :slight_smile:

3

Does disabling the act of submission rather than disabling the actual submit button take care of those who hit Enter instead of hitting the submit?

If people are double-submitting, though, I’d start looking around to see what’s making your form take so long to be processed. We had a similar problem (people re-submitting) and it turned out the back-end processing was going up to a whole minute long, which is way too long to give response to a user that the form was successfully submitted.

4

Does disabling the act of submission rather than disabling the actual submit button take care of those who hit Enter instead of hitting the submit?

Indeed it does. With this code it is also not possible to submit the form more than once using enter, which is nice.

If people are double-submitting, though, I’d start looking around to see what’s making your form take so long to be processed. We had a similar problem (people re-submitting) and it turned out the back-end processing was going up to a whole minute long, which is way too long to give response to a user that the form was successfully submitted.

Good point, but this site is just intended for a few (elder) relatives / friends and all I want to do is avoid them (the relatives) submitting stuff over and over again (which they are amazingly good at).

I had the same problem with a site for work which I wrote using Ruby on Rails. In that case I generated a hash of their entire submission and stored it in a session variable which I could then check before writing anything to the db.

Unfortunately my PHP skills are not quite as good …

Thanks for all the help.

5

(which they are amazingly good at)

It should never amaze us how easily users can break our stuff… but we still are : )