js提交按钮变灰色，防止用户重复提交

最新推荐文章于 2023-11-23 16:59:28 发布

平凡的Mac

最新推荐文章于 2023-11-23 16:59:28 发布

阅读量2.3k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

当点击按钮后，按钮即变为灰色，不可再次点击！

防止用户重复提交数据。

   XML/HTML代码 
 
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<title>表单点击提交按钮后变成灰色不可再次点击</title>  
</head>  
<body>  
<form name=form1 method="POST" action="http://www.baidu.com" target=_blank>  
 <p><input type="text" name="T1" size="20"><input type="button" value="提交" onclick="javascript:{this.disabled=true;document.form1.submit();}">  
<input type="reset" value="重置" name="B2"></p>  
</form>  
</body>  
</html>  

附一个在蓝色理想看到的例子：

   XML/HTML代码 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
<head>  
<title> New Document </title>  
</head>  
<body>  
<form action="somepage.asp">  
<input type="text" value="0" name="txt1"/>  
<input type="button" value="开始" name="btnStart"/>  
<input type="button" value="重置" name="btnReset"/>  
</form>  
</body>  
</html>  
<script language="JavaScript" type="text/javascript">  
<!--   
//获取表单中的表单域   
var txt=document.forms[0].elements["txt1"];   
var btnStart=document.forms[0].elements["btnStart"];   
var btnReset=document.forms[0].elements["btnReset"]   
//定义定时器的id   
var id;   
//每10毫秒该值增加1   
var seed=0;   
btnStart.onclick=function(){   
      //根据按钮文本来判断当前操作   
      if(this.value=="开始"){   
              //使按钮文本变为停止   
              this.value="停止";   
              //使重置按钮不可用   
              btnReset.disabled=true;   
              //设置定时器，每0.01s跳一次   
              id=window.setInterval(tip,10);   
      }else{   
              //使按钮文本变为开始   
              this.value="开始";   
              //使重置按钮可用   
              btnReset.disabled=false;   
              //取消定时   
              window.clearInterval(id);   
      }   
}   
//重置按钮   
btnReset.onclick=function(){   
     seed=0;   
}   
//让秒表跳一格   
function tip(){   
      seed++;   
      txt.value=seed/100;   
}   
//-->  
</script>  