防止按钮重复提交的方法
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);
}
<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();" />
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());" />
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);
}
//后台
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; 否则,就不执行后台代码了。