prevent the same request done more than once

Question

I have an ASP.NET MVC3 application running in a factory intranet. Factory uses Internet Explorer and end users are a little bit impatient. In a page where I'm adding a new object to database, Explorer doesn't respond quickly and users re-press the add button, hence the same object is inserted twice. I'm thinking of ways to prevent it.

I've written a script that makes the button invisible after it's pressed, but I want to make it just not-working. Is there such a javascript function or a server-side implementation that makes submit button doesn't work?

Answer 1

"Not working" clientside:

I would say disabling

 document.getElementById("btnAdd").disabled = true; 

is a little more safe than just making it invisible. On top of that, consider adding a loading animation in the form of a GIF from http://www.ajaxload.info/ so that the user knows they have to wait.

Ideally, you'd be making ajax calls and could re-enable the button if the action failed or returns a message.

Worst case scenario, you could remove the button from the page altogether, but that's not a very good idea if the action fails and the user will need to press it again.

"Not working" serverside:

On the database level, catch and reject duplicates (to your criteria) to ensure that even if they do slip one past, you don't end up with duplicate data.