开发者

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

开发者 https://www.devze.com 2023-01-12 06:57 出处:网络
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

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 with开发者_如何学运维out rendering the page useless when the user clicks the Back button? (In case it matters at all, I'm using ASP.NET MVC 1).


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消