您的位置：首页 > Web前端 > JavaScript

如何让一个button只能点一下?防止点击多下而重复提交?

2010-03-23 14:42 519 查看

方法一：

<script language="javascript" type="text/javascript">
//标识页面是否已提交
var subed = false;

function check()
{
//验证是否重复提交
if (subed == true)
{
alert("信息正在发送给服务器，请不要重复提交信息！");
return false;
}
subed=true;
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Add" method="post" runat="server" onsubmit="return(check());">

方法二：

在webform3.aspx中代码如下：
<%@ Page language="c#" Codebehind="WebForm3.aspx.cs" AutoEventWireup="false" Inherits="WebApplication1.WebForm3" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm3</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

<script language=javascript >
function abc()
{
var mybutton=document.getElementById("Button1");
mybutton.disabled=true; //变灰
__doPostBack("Button1",""); //执行服务器端button1的click事件
}

</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server"></asp:TextBox>
<asp:Button id="Button1" style="Z-INDEX: 102; LEFT: 8px; POSITION: absolute; TOP: 40px" runat="server"
Text="Button"></asp:Button>
</form>
</body>
</HTML>

在webform3.aspx.cs中主要两个方法中的代码如下：
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
this.GetPostBackEventReference(Button1); //这句很关键，有这句才能让客户端执行服务器端事件。
Button1.Attributes.Add("onclick","abc();");

}
//用作测试用的
private void Button1_Click(object sender, System.EventArgs e)
{
this.TextBox1.Text="1";
int k=0;
for(int i=0;i<9999;i++)
for(int j=0 ;j<999;j++)
k=9;
this.TextBox1.Text="1";
}

测试结果：由于两个循环运行时间比较长，在运行时，button按钮一直是灰的，只有运行完才会恢复，如果运行完后还想变为灰的，那在最后添加一个this.Button1.Enabled=false;就行了。这样就达到了按钮先变灰然后执行服务器端事件。

方法三：

using System;
using System.Drawing;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.Design;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace WebCustomLib.Controls
{
/// <summary>
///OneOffButton 的摘要说明。
/// </summary>
///
[
ToolboxItemFilter("System.Web.UI",ToolboxItemFilterType.Require),
ToolboxBitmap(typeof(OnlyOneButton),"OnlyOneButton.OnlyOneButton.bmp"),
ToolboxData("<{0}:OneOffButton runat=/"server/"></{0}:OneOffButton>")
]
public class OnlyOneButton : System.Web.UI.WebControls.Button
{
private const string JAVASCRIPT_ID = "{29FD7A41-49FD4FC4-AFA9-6A0B875A1A51}";
private const string JAVASCRIPT_HOOK = "return OneOffButton_Click_Handle(this);";
private const string JAVASCRIPT_SCRIPT = "/n"
+"<SCRIPT Language=/"JavaScript/">/n"
+"function OnlyOneButton_Click_Handle(ctrl)/n{/n"
+"setTimeout(/"OnlyOneButton_Delay(///"/"+ctrl.name+/"///")/",100);/n"
+"return true;/n}/n"
+"function OnlyOneButton_Delay(ctrlname)/n{/n"
+"eval(/"document.all./"+ctrlname+/".disabled=true/");/n}/n"
+"</SCRIPT>/n";

public OnlyOneButton()
{
this.Text = "OnlyOneButton";
}

protected void RenderJavaScript()
{
if(!Page.IsClientScriptBlockRegistered(JAVASCRIPT_ID))
{
Page.RegisterClientScriptBlock(JAVASCRIPT_ID,JAVASCRIPT_SCRIPT);
}
}

protected override void AddAttributesToRender(HtmlTextWriter writer)
{
base.AddAttributesToRender (writer);
writer.AddAttribute("OnClick",JAVASCRIPT_HOOK);
}

protected override void OnPreRender(EventArgs e)
{
base.OnPreRender (e);
RenderJavaScript();
}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： button javascript webform textbox function microsoft

相关文章推荐

新的分享

章节导航