夏日博客

A-A+

jquery实现数秒后自动提交表单

2016年01月09日 前端设计 暂无评论 阅读 8 views 次

js中提交表单可以直接使用xxx.submit()来提交了，如果我们点击按钮之后等待几秒来提交的话可以使用settimeout来实现定时操作了，具体来看个例子。

例子代码如下:

  1. <script language='javascript'>  
  2. <!--  
  3. $(document).ready(function(){  
  4.   // #formdownload ajaxform  
  5.   $('#formdownload').ajaxform({  
  6.     target:'#formdownloadwindows',success:function(){  
  7.     }  
  8.   });  
  9. });  
  10. function jump(count,formid) {  
  11.   window.settimeout(function(){  
  12.   count--;  
  13.   if(count > 0) {  
  14.     $('#jumpnum').html(count);  
  15.     jump(count,str);  
  16.   } else {  
  17.     $(str).submit();  
  18.   }  
  19.   }, 1000);  
  20. }    
  21. //-->  
  22. </script>  
  23. <form action="/action/download" method="post" id="formdownload">  
  24. wait <span id="jumpnum"></span> seconds  
  25. <input type="button" onclick="jump(30,"#formdownload");" />  
  26. </form>  

其实倒计时跳转也是同样的道理了,代码如下:

  1. <html>   
  2.   <head>   
  3.   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
  4.     <title>跳转页面</title>    
  5.     <script src="jquery.js"></script>  
  6.     <script language="javascript"><!--  
  7.         $(document).ready(function() {   
  8.             function jump(count) {   
  9.                 window.setTimeout(function(){   
  10.                     count--;   
  11.                     if(count > 0) {   
  12.                         $('#num').attr('innerHTML', count);   
  13.                         jump(count);   
  14.                     } else {   
  15.                         location.href="https://www.xiariboke.net";   
  16.                     }   
  17.                 }, 1000);   
  18.             }   
  19.             jump(3);   
  20.         });  
  21. // --></script>   
  22.   </head>       
  23.   <body>     
  24.     <span style="color:red">欢迎来到www.xiariboke.net！</span><br/>xiariboke.net页面将在3秒后跳转...<br/>还剩<span id="num">3</span>秒  
  25.   </body>   
  26. </html>  
标签：

给我留言