Little strange thing

Last week, my colleague and I were working on an issue in which we had to restrict user from clicking the same submit button (on a form rendered in a browser) multiple times. We thought of handling it through the client side JavaScript. It was a simple fix to handle onClick event of the submit button and disable the button. We did it by using jQuery and the code shown below:

 $("#submitButton").on("click", function()
{
 $(this).attr('disabled','disabled');
});

We had tested the fix and was working fine. So, went back home.

THE NEXT DAY !!!

The next day we started seeing that user is unable to submit the form at all. (STRANGE !) After a bit of analysis we figured out that, this is happening only in Chrome browser while we had verified it in Internet Explorer.

This is interesting. (PROBLEM) Disabling the submit button on client-side using JavaScript is completely blocking the form from submitting in Chrome while it works well in IE and Firefox. (Not tested in other browsers).

To understand this correctly, I have created a simple HTML page - Page1.html has a form and submit button, which upon clicking submits the form to another page.

(FIX)  Hence, as a work around, we had used setTimeOut() function of JavaScript as shown in the code below:

 $("#submitButton").on("click", function()
{
setTimeout(function(that){ 
$(that).attr('disabled','disabled'); 
}, 1, this); 
});

So, this way browser does not block the form from submitting and submit button gets disabled after 1 milli second from the button click action. This works well in three of the browsers - Chrome, IE, Firefox.

Attaching the HTML page used for this little experiment.

Page1.html