I have a page with a form where I'm trying to prevent duplicate submission, which is fairly straightforward (in case anyone's curious, I used this
$("form").submit(function()
{
setTimeout(function()
{
$("input").attr("disabled", "disabled");
}, 50);
});
...which I stole from this page, and it works fine. As expected, the inputs are disabled quickly, the form is submitted as expected, and the user is redirected.
Here's my problem: I anticipate users using the Back button sometimes instead of in-page navigation, so I would like for the page to be functional if they click the Back button. However, when I click the Back button after the successful post, I'm returned to the previous page with all the inputs disabled (as you might have known would happen). I'd like them to be able to use the page, if they desire, after clicking the Back button.
I first tried using header/meta tags to tell the browser not to cache the page, but that didn't work (in Firefox 3.6.8) - and then I decided I didn't want to do that anyway, because it probably wouldn't be cross-browser compatible, and may not be a best practice anyway (here is one such case to be made). I don't want to use anything that "breaks" the Back button like some applications I've seen do (like, when the user clicks it, it doesn't take them back a page, but forces them to stay on that page), which to me seems like a bad idea. Does anyone know of a way I can prevent duplicate form submission on the client side without rendering the page useless when the user clicks the Back button? (In case it matters at all, I'm using ASP.NET MVC 1).