A-A+

js中表单提交后按钮变灰色的功能

2016年02月21日 web前端设计 暂无评论 阅读 7 views 次

表单提交后按钮变灰色的功能实现方法,可有效防止重复提交表单,如果提交动作没有完成,则一直呈灰色状态等待确认,代码的实现也是超简单的,此方法也是实用,在点击“Submit按钮”之后,将Submit设置为Disable,使按钮变灰不可用,具体的做法如下.

1、先在Form里加入:

onSubmit="submitonce(this)"

2、再在“Submit按钮”之前加入下面的代码:

  1. <html>   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
  4. <title>表单提交后按钮变成灰色</title>   
  5. </head>   
  6. <body>   
  7. <form name=form1 method="POST" action="/" target=_blank><p><input type="text" name="T1"  
  8. size="20"><input type="button" value="提交" onclick="javascript:  
  9. {this.disabled=true;document.form1.submit();}">   
  10. <input type="reset" value="重置" name="B2"></p>   
  11. </form>   
  12. </body>   
  13. </html>  

我们写在input中不好,我们可以写成函数,代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1  
  2. -transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <title>表单提交后按钮变灰代码</title>  
  6. <meta http-equiv="content-type" content="text/html;charset=gb2312">  
  7. </head>  
  8. <body>  
  9. <script language="javascript">  
  10. function my_submit(){  
  11.  document.form1.submit();  
  12.  document.form1.submit1.disabled=true;  
  13. }  
  14. </script>  
  15. <form action="/" method="post" name="form1">  
  16. <input type="text" name="name">  
  17. <input type="button" name="submit1" value="提交" onClick="javascript:my_submit();">  
  18. </form>  
  19. </body>  
  20. </html>  

3、如果Form中原本就存在onSubmit动作,或者按钮类型不是Submit,而是button,则在onSubmit作用的函数中加入下面的代码:

document.fHtmlEditor.Submit.disabled=true;

如果你想禁止当前页面所有按钮可使用下面代码:

  1. <script language="javascript">  
  2. function submitonce(theform){  
  3. if (document.all||document.getElementById){  
  4. for (i=0;i<theform.length;i++){  
  5. var tempobj=theform.elements  
  6. if(tempobj.type.toLowerCase()=="submit")  
  7. tempobj.disabled=true  
  8. }  
  9. }  
  10. }  
  11. </script>  
标签:

给我留言