js如何设置点击提交按钮后按钮变灰色不可用状态

发布时间:2020-01-19编辑:脚本学堂
本文介绍了js设置点击提交按钮后,按钮变灰不可用的几种方法,提交按钮变灰色不可用,有效防止重复提交,需要的朋友参考下。

js设置按钮变灰不可用

方法1:直接按钮中加入
当点击提交后,提交按钮变灰色不可用,有效防止重复提交

在提交按钮上加入:
 

onclick="javascript:{this.disabled=true;document.form1.submit();}",
 

当按钮点击后,将按钮不可用属性disabled设置为true,按钮变灰。

代码:
 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表单提交后按钮变成灰色 - www.plcxue.com</title>
</head>
<body>
<form name=form1 method="POST" action="/" 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>

方法2:通过onSubmit事件实现,并且可以将变灰按钮变为可用。
在form中添加 onSubmit事件,如果表单加入了判断,此方法直接就可以用了,记住放到最后,否则一开始就为灰了,但加上了一个使提交按钮变为可用的代码,
即可防止重复提交信息,也可以防止代码问题导致不可提交的情况。

代码:
 

<form name=form1 action="" onSubmit=" return closebut()" >
<input name="imageField" type="submit" class="inputbut" value="确定" /><br>
<input type="button" name="hui" id="hui" value="让提交按钮可用" onclick="document.form1.imageField.disabled=false" />
</form>
<script>
function closebut(){
document.form1.imageField.disabled=true;
}
</script>

方法3:
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
<a href="http://www.osxue.com/">系统学堂</a><hr>
<script language="javascript">
function submitonce(jb51_net){
 if(document.all||document.getElementById){
  for(i=0;i<jb51_net.length;i++){
   var tempobj=jb51_net.elements[i];
   if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
   tempobj.disabled=true;
  }
 }
}
</script>
<form action="http://www.osxue.com" method="post" name="jb51_net" onSubmit="submitonce(this)">
<input type="text" name="name">
<input type="submit" name="submit1" value="提交">
</form>
</body>
</html>