Preventing duplicate form submission while not breaking page when clicking Back button

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).

Answers


Well, it doesn't sound like anyone else has thought of a better idea and posted it. I noticed our own Stack Overflow has the same behavior (at least on the Ask Question page), disabling the submit button, and when I clicked "Back", the button was still disabled. Maybe the best I can do is to leave it with the button(s) disabled, thus forcing them to refresh the page manually, or (hopefully) encouraging them to use the site navigation instead of the Back button where possible.

If anyone else has any better ideas, though, I'm still open to them.


Why don't you create a random key that is unique for every form, then when it has been submitted, insert the key into a database, then if that key already exists in the database the form has already been submitted, so don't handle the data for a second time... That way you're not modifying the DOM and can be sure of data integrity.


Need Your Help

Laravel Fill form with database saved fields

php laravel laravel-4

this below code is my profile managment form for users and i want to fill input tags with $profile variable .

cx_freeze, mpl_toolkits/basemap/ how include the data folder in the build library.zip

python python-2.7 cx-freeze matplotlib-basemap

I am struggling a lot trying to create a .exe for my Gui originaly coded with opensuse. I am trying to make the .exe for windows (under XP). cx_freeze seems to work better for my case. The build fo...