前端 js 实现简单表单提交

Posted 2020-08-20 Terre

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端 js 实现简单表单提交相关的知识，希望对你有一定的参考价值。

1. 登录页验证用户身份，登录成功之后等待一定秒数，跳转到操作页面

<html> 
  <head> 
    <title>Login.html</title> 
     
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="this is my page"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
    <script type="text/javascript"> 
      function checkuser() { 
         if($(‘uname‘ == "lala") && $(‘pwd‘) == "123") { 
           return true; 
         }else { 
            return false; 
         } 
      } 
       
      function $(id) { 
        return document.getElementById(id).value; 
      } 
     </script> 
  </head> 
   
  <body> 
    <form action="ok.html"> 
      u:<input type="text" id="uname"/><br> 
      p:<input type="password" id="pwd"/><br> 
      <input type="submit" value="登录" onclick="return checkuser()"/> 
    </form> 
  </body> 
</html>

2. 登录成功页面中，等待5秒

<html> 
  <head> 
    <title>ok.html</title> 
     
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="this is my page"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
    <script type="text/javascript"> 
        function tiao() { 
          clearInterval(mytime); 
          window.open("manage.html","_self"); 
        } 
         
        setTimeout("tiao()",5000); 
         
        function changeSec() { 
           //得到myspan值 
           $(‘myspan‘).innerText=$(‘myspan‘).innerText-1; 
        } 
         
         function $(id) { 
        return document.getElementById(id); 
      } 
        var mytime = setInterval("changeSec()",1000); 
    </script> 
  </head> 
   
  <body> 
    登录成功，<span id="myspan">5</span>秒后自动跳转到管理页面 
  </body> 
</html>

3. 写一个manage.html 即可

以上是关于前端 js 实现简单表单提交的主要内容，如果未能解决你的问题，请参考以下文章

vue.js中 ,回车键实现登录或者提交表单!

前端 js 实现简单 表单提交

前端 js 实现简单表单提交