防止按钮重复提交的方法

1. 一种简单的方法

//前台
<asp:Button ID="btnTest" runat="server" Text="Button" onclick="btnTest_Click"  CssClass="button_common" />

//后台
protected void Page_Load(object sender, EventArgs e)
{
   
this.btnTest.Attributes.Add("onclick", ClientScript.GetPostBackEventReference(btnTest, "Click"+ ";this.disabled=true; this.value='提交中...';");
}

protected void btnTest_Click(object sender, EventArgs e)
{
   System.Threading.Thread.Sleep(
5000);
   ClientScript.RegisterStartupScript(GetType(), 
"btnTest""alert('提交成功!!!');"true);
}

可以实现基本功能,提交时,按钮灰掉,按钮显示“提交中...”。

但是当点击按钮需要验证的时候,比如:

//JS
function submitValidate()
{
  
if(confirm("Click?"))
    
return true;
  
else
    
return false;
}
//前台
<asp:Button ID="btnTest" runat="server" Text="Button" onclick="btnTest_Click"  CssClass="button_common" OnClientClick="return submitValidate();" />

Page_Load内的代码会执行,但是按钮样式却不改变了,也不能控制重复提交了(为什么呢?)

2. 使用JS方法

//JS
   var isBusyFlag = false;
    
function ClickButtonValidation(){
        
if(isBusyFlag){       
            alert(
"You have click, please waiting...");
            
return false;
        }
else{
            isBusyFlag 
= true;
            
return true;
        }
    }
    
function buttonControl(id, btnText, condition)
    {
        
var obj= document.getElementById(id);
        
if(condition || condition ==undefined)
        {
            
if(ClickButtonValidation()){
            obj.className 
= "disable_button"
            obj.value 
= btnText;
            
return true;
            }
            
else 
            {
                isBusyFlag 
= false;
                
return false;
            }
        }
        
else
            
return false;
    }

//前台
<asp:Button ID="btnTest" runat="server" Text="Button" onclick="btnTest_Click"  CssClass="button_common" OnClientClick="return buttonControl('btnTest','提交中...',submitValidate());" />
//如果没有按钮验证条件,可以写为OnClientClick="return buttonControl('btnTest','提交中...');"

//后台
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected 
void btnTest_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(
5000);
            ClientScript.RegisterStartupScript(GetType(), 
"btnTest""alert('提交成功!!!');"true);
        }

此方法可以作为公用方法,供多种按钮调用。

在JS方法里,不可以设置 obj.disabled = true; 否则,就不执行后台代码了。

原文地址:https://www.cnblogs.com/niuniu1985/p/1781567.html