防止重复表单提交,同时单击“后退”按钮时不破坏页面
我有一个带有表单的页面,我试图防止重复提交,这相当简单(如果有人好奇,我使用了这个
$("form").submit(function()
{
setTimeout(function()
{
$("input").attr("disabled", "disabled");
}, 50);
});
......我从 此页面,并且工作正常。正如预期的那样,输入很快被禁用,表单按预期提交,并且用户 这是
我的问题:我预计用户有时会使用“后退”按钮而不是页内导航,因此我希望他们单击“后退”按钮后页面能够正常运行,但是,当我在成功后单击“后退”按钮时。 单击“后退”按钮后可以使用该页面。
发布后,我返回到上一页,所有输入均已禁用(您可能已经知道会发生这种情况),如果他们愿意,我首先 尝试使用 header/meta 标签告诉浏览器不要缓存页面,但这不起作用(在 Firefox 3.6.8 中) - 然后我决定无论如何都不想这样做,因为它可能不会跨浏览器兼容,并且可能不是最佳实践(这里就是一个这样的案例待制作)。我不想使用任何“破坏”后退按钮的东西,就像我见过的一些应用程序所做的那样(例如,当用户单击它时,它不会将他们带回到页面,而是强制他们留在该页面上),对我来说这似乎是个坏主意。有谁知道一种方法可以防止在客户端重复提交表单,而不会在用户单击“后退”按钮时使页面变得无用? (如果它很重要,我正在使用 ASP.NET MVC 1)。
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).
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
嗯,听起来没有其他人想到更好的主意并发布它。我注意到我们自己的 Stack Overflow 有相同的行为(至少在“提问”页面上),禁用提交按钮,当我单击“返回”时,该按钮仍然被禁用。也许我能做的最好的事情就是禁用按钮,从而迫使他们手动刷新页面,或者(希望)鼓励他们尽可能使用网站导航而不是后退按钮。
不过,如果其他人有更好的想法,我仍然愿意接受。
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.
为什么不创建一个对于每个表单都是唯一的随机密钥,然后在提交时将密钥插入数据库,然后如果该密钥已经存在于数据库中,则表单已经提交,所以不要第二次处理数据...这样您就不会修改 DOM 并且可以确保数据完整性。
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.