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

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

程式很簡單，先看一下畫面的部分：

    <div>
        測試
        <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>

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

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        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,...都可以用相同的技巧唷

^_^