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

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

 

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

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

 

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

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

 

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

Code
                <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，保证对话框中点击取消按钮后，页面不执行任何操作。”

 

相关的代码如下：

Code
    <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，感兴趣的朋友可以去看看，我放在这里，除对该文章作者的尊重，也是为日后学习积累之用。因文章排版的原因，放置在最后，请作者谅解。

 

转载于:https://www.cnblogs.com/lybohe0807/archive/2009/11/17/1604237.html