Prevent duplicate submission, general idea is that when the user clicks the submit button in the browser JS disable the button off, thereby preventing the user continues to click on the button, to achieve the purpose of preventing duplicate submission. Prevent online article submission has a lot of repeat, why did I have to write it, obviously I did not get enough support. . . Recently a client, there is always a month old complained several repeat business data; but the business data to create a page, we have applied the conventional anti-duplicate submissions technology, so why has it ......
1. Conventional anti resubmit
1: <asp:Button runat="server" ID="btnPostBack1" Text="按我1" OnClientClick="this.disabled=true;this.form.submit();"/>
It should be noted that:
(. 1). UseSubmitBehavior = "to false" : to be set to false, which generates one of the input type is Button; default if true, the type of input is generated submit, postback to the server end, the button will not trigger server-side events;
(2) the button can not have ValidationGroup property, otherwise, postback to the server, the button will not trigger server-side events.;
2. When met Validator controls
If the Validator controls on the page, continue to use one kind of the above, we find that, Validator controls ineffective. Because after disable the button off, when submission will no longer be verified using the Validator control.
To solve this problem, a solution is to be submitted before a manual check. If we use the IE Develop tool to track JS code submitted, we will find in asp.net Page_ClientValidate functions to perform validation Validator set, so the following method is called once by hand, if the check fails, not submitted to:
1: <script type="text/javascript">
2: function disableButton(button)
3: {
4: if (typeof (Page_ClientValidate) == 'function' && Page_ClientValidate() == false)
5: {
6: return false;
7: }
8: button.disabled = true;
9: return true;
10: }
11: </script>
12:
13: <div>
14: <asp:TextBox runat="server" ID="tbxInput1"></asp:TextBox>
15: <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbxInput1"
16: ValidationGroup="Group1" ErrorMessage="*"></asp:RequiredFieldValidator>
17: <asp:Button runat="server" ID="btnPostBack1" Text="按我1" UseSubmitBehavior="false"
18: ="disableButton(this);" OnClick="btnPostBack_Click">
19: </asp:Button>
20: </div>
Note: If there are multiple Validator controls page, and a plurality of packet checksum Button required, only needs to set the Button to ValidationGroup .
The above method, seems to have perfect; Under normal circumstances, the article written here also the end, our system is so used. But ...... Recently a client, there are always a few old complained repeat business data every month. . .
3. When the user clicks fast enough ......
According to customer feedback, we checked that the next few repeat business data, found that occasionally there will be twice the same record, and create time DB recorded exactly equal (to the millisecond) . And also allows users to demonstrate a bit of her daily mode of operation, she found the mouse quite fast; although not reproduce the problem, but we generally know the possible cause of the problem: When the user clicks fast enough, browser not had time to disable the swap button , the user has clicked the second time ......
To reproduce the problem, we have made the following tests:
1: <script type="text/javascript">
2: function disableButton(button) //, validateGroup)
3: {
4: if (typeof (Page_ClientValidate) == 'function' && Page_ClientValidate() == false)
5: {
6: return false;
7: }
8: button.disabled = true;
9: }
10:
11: function doubleClick()
12: {
13: var button1 = document.getElementById('btnPostBack1');
14:
15: //模拟重复点击2次
16: }
17: </script>
18:
19:
20: <div>
21: <asp:TextBox runat="server" ID="tbxInput1"></asp:TextBox>
22: <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbxInput1"
23: ValidationGroup="Group1" ErrorMessage="*"></asp:RequiredFieldValidator>
24: <asp:Button runat="server" ID="btnPostBack1" Text="按我1" UseSubmitBehavior="false"
25: ValidationGroup="Group1" OnClientClick="disableButton(this);" OnClick="btnPostBack_Click">
26: </asp:Button>
27: </div>
28: <input type="button" onclick="doubleClick();" value="点击一次，模拟连续点击'按我1'两次" />
然后页面后台代码如下：
1:
2: public static int i = 0;
3: protected void btnPostBack_Click(object sender, EventArgs e)
4: {
5: Response.Write(((Button)sender).Text + " " + (++i).ToString());//将累加结果输出
6: }
每次页面PostBack时，全局变量+1，如果连续PostBack两次，则得到的是+2的累计。测试的结果：除了偶尔+1，大部分情况都是累加2……看来，如果用户点击鼠标的速度足够快，前面2中的办法还是无法杜绝重复提交，咋办呢？？？
4. 终极绝杀技
处理思路就是，用数组记录用户的点击时间，如果点击时间小于某个时间间隔(下面演示的1秒，即1000毫秒)，则认为是重复提交，并取消当前点击事件，直接上代码了：
1: <html xmlns="http://www.w3.org/1999/xhtml">
2: <head runat="server">
3: <script type="text/javascript">
4: var date = new Array();
5: function disableButton(button, validateGroup)
6: {
7: date.push(new Date());
8: if (date.length > 1
9: && (date[date.length - 1].getTime() - date[date.length - 2].getTime() < ))
10: {
11: event.cancelBubble = true;
12: return false;
13: }
14: if (typeof (Page_ClientValidate) == 'function'
15: && ((validateGroup == undefined && Page_ClientValidate() == false)
16: || (validateGroup != undefined && Page_ClientValidate(validateGroup) == false)))
17: {
18: return false;
19: }
20:
21: button.disabled = true;
22: return true;
23: }
24:
25: function doubleClick()
26: {
27: var button1 = document.getElementById('btnPostBack1');
28: button1.onclick();
29: button1.onclick();
30: }
31: </script>
32: </head>
33: <body>
34: <form id="form" runat="server">
35: <div>
36: <asp:TextBox runat="server" ID="tbxInput1"></asp:TextBox>
37: <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbxInput1"
38: ValidationGroup="Group1" ErrorMessage="*"></asp:RequiredFieldValidator>
39: <asp:Button runat="server" ID="btnPostBack1" Text="按我1" UseSubmitBehavior="false"
40: ValidationGroup="Group1" OnClientClick="" OnClick="btnPostBack_Click">
41: </asp:Button>
42: </div>
43: <div>
44: <asp:TextBox runat="server" ID="tbxInput2"></asp:TextBox>
45: <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="tbxInput2"
46: ValidationGroup="Group2" ErrorMessage="*"></asp:RequiredFieldValidator>
47: <asp:Button runat="server" ID="btnPostBack2" Text="按我2" UseSubmitBehavior="false"
48: OnClientClick="" OnClick="btnPostBack_Click">
49: </asp:Button>
50: </div>
51: <input type="button" onclick="doubleClick();" value="点击一次，模拟连续点击'按我1'两次" />
52: </form>
53: </body>
54: </html>
说明：
(1). 测试时发现，如果直接单独设置cancelBubble、或者returnValue来取消事件，经常取消不了，依然存在高频率的重复提交。因此只好用返回值来实现手工控制；
(2). disableButton接收一个validateGroup参数，如果指定了ValidateGroup，则只验证改组；如果未指定，则验证全部验证控件。
于是，整个世界清净了。。。
Reproduced in: https: //www.cnblogs.com/happyhippy/archive/2010/08/15/1800289.html