使用半透明的Div遮蓋表單防止重複送出(Submit)範例

使用半透明的Div遮蓋表單防止重複送出(Submit)範例

一般表單當送出後,需要執行比較長的時間,往往畫面留著,有些使用者等不及會再按看看,造成表單重複送出。其實這個問題可以用一個絕對位置的div搭配簡單的JavaScript就可以把表單遮蓋,讓等待的人按不到按鈕。

程式很簡單,先看一下畫面的部分:


        測試
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="divBlock.style.display='';" />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    <div id="divBlock" 
        style="border-style: solid; border-width: 1px; z-index: 1; position: absolute; top: 3px; left: 4px; height: 142px; width: 262px; background-color: #808080;filter: Alpha(Opacity=80);display:none;">
        <font color="yellow" size="7">處理中......</font>
    </div>

再來為了按了按鈕可以模擬執行較久,所以寫了個簡單的迴圈,讓她辛苦一點跑久一點


        Dim y As Integer
        Dim c As Integer = 0
        '跑一個比較久的迴圈
        For y = 0 To 1000000000
            c += 1
        Next
        Me.Label1.Text = c.ToString & "--" & Now.ToString
    End Sub

就這麼簡單,並且在ASP,PHP,JSP,...都可以用相同的技巧唷

^_^


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat