다음을 통해 공유

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

Comments

  • Anonymous
    March 09, 2016
    Nice explanation. Thanks for helpful tip !

  • Anonymous
    March 09, 2016
    One small query regarding the sample you provided.  In HTML, disabled attribute accepts a Boolean value (True or False) or it should be set to the string "disabled" as in your example.

  • Anonymous
    May 14, 2016
    good informations!