Attributes学习笔记20091116：页面按钮的二次确认之JS实现

今天在网上看到一篇文章，是关于按钮的二次确认，建立页面参照着做了下，有以下心得：

1、取指定页面，发生点击操作的对象的ID属性：

        var btnId=event.srcElement.getAttribute('ID');

2、获得指定Id的控件的Text值，这里的控件指的是服务器端控件

        var btnText=document.all(btnId).value; 

 

3、为了区分执行点击操作的控件是按钮，而非其他，命名时，需要有一定的规范，比如：

                <asp:Button ID="btnConfirm" runat="server" Text="确定" OnClientClick="return DoClick()" OnClick="btnConfirm_Click" />
                <asp:Button ID="btnCancle" runat="server" Text="取消" OnClientClick="return DoClick()" OnClick="btnCancle_Click" />

若是按钮，则弹出对话框，提示是否确认某种操作：

        if(btnId.indexOf('btn')!=-1)
        {     
             if(confirm("您确定要执行 "+btnText+" 操作?"))
                return true;
            else
                return false;
        }

 

4、如果用户确认某种操作，返回true，否则返回false，可以在服务器端控件的OnClientClick事件中添加类似语句：

     OnClientClick="return DoClick()" 

鉴借原文的说法就是：“注意保证函数DoClick()返回bool值true 或者false，同时在OnClientClick属性中追加return，保证对话框中点击取消按钮后，页面不执行任何操作。”

相关的代码如下：

    <script language="javascript" type="text/javascript">
    function DoClick()
    {
        debugger;
        var btnId=event.srcElement.getAttribute('ID');
        //event.srcElement.getAttribute属性将得到页面上执行点击操作时，对应的控件ID
        var btnText=document.all(btnId).value; 
        if(btnId.indexOf('btn')!=-1)
        {     
             if(confirm("您确定要执行 "+btnText+" 操作?"))
                return true;
            else
                return false;
        }
        return false;
    }
    </script>


    <div style="text-align: left; padding-left: 20px;">
         <asp:TextBox ID="txtContent" runat="server"></asp:TextBox>
         <asp:Button ID="btnConfirm" runat="server" Text="确定" OnClientClick="return DoClick()" OnClick="btnConfirm_Click" />
         <asp:Button ID="btnCancle" runat="server" Text="取消" OnClientClick="return DoClick()" OnClick="btnCancle_Click" />
         <br />
         <asp:Label ID="lblContent" runat="server" Text=""></asp:Label>    
    </div>    

 

附注：学习鉴借的文章是：http://www.cnblogs.com/myroad/archive/2009/11/15/1603360.html，感兴趣的朋友可以去看看，我放在这里，除对该文章作者的尊重，也是为日后学习积累之用。因文章排版的原因，放置在最后，请作者谅解。