zoukankan      html  css  js  c++  java
  • Html 中表单提交的一些知识总结——防止表单自动提交,以及submit和button提交表单的区别

    转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/

    在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 

    后来在form 中添加:onsubmit="return false;"问题终于解决。 

    <form name="frm" method="post" onsubmit="return false;"> 

    下边对“防止表单自动提交,以及submit和button提交表单”进行了些总结,希望对大家有些用(如果有不当的地方请指出)。 

    < html >    
    < script >    
      
    function exec(p){   
        document.frm.action  =  p ;   
        document.frm.submit();   
    }   
    function exec1(p){   
        document.frm.action  =  p ;   
        document.frm.submit();   
        document.frm1.submit();//IE页面定位到最后一个提交的action所对应的页面   
        alert("haha");//submit()后边的语句正常执行,这里弹出框文字”haha“   
    }   
    </ script >    
    < head >    
    < h1 > 总结:FORM  onSubmit = "return false" 防止表单自动提交,以及submit和button提交表单的区别 </ h1 >    
    < head >    
    < body >    
    <!-- (1) 下边的写法使得表单frm能够自动提交   
    下边的这个form,将鼠标点进的文本框中然后按键盘的回车键,则页面自动进入百度页面:http://www.baidu.com   
    < form   name = 'frm'   action = "http://www.baidu.com" >    
        < input   type = "text"   name =  "userName" />    
        < input   type = "hidden"   name =  "userName1" />    
    </ form >    
      
    注意:将上边的“< input   type = "hidden"   name =  "userName1" /> ”去掉或者增加上,都不能改变页面的自动提交!   
    -->    
      
    <!-- (2)而同样的写法,进行如上的操作,却不会提交   
    可能是有两个文本输入框的缘故吧(注意:上边仅有一个)。   
    那如果一个页面中有多个from会怎样??后边有相关试验。   
      
    < form   name = 'frm'   action = "http://www.baidu.com" >    
        < input   type = "text"   name =  "userName" />    
        < input   type = "text"   name =  "pass" />    
    </ form >    
    -->    
      
    <!-- (3)下面试试,同一个页面有多个from的情况   
    这里先试试多个form、每个form中仅有一个文本输入框   
    < form   name = 'frm1'   action = "http://www.baidu.com" >    
        < input   type = "text"   name =  "userName" />    
        < input   type = "hidden"   name =  "userName1" />    
    </ form >    
    < form   name = 'frm2'   action = "http://www.google.cn/" >    
        < input   type = "text"   name =  "userName" />    
    </ form >    
    经试验,每个from中的文本输入框都具有自动提交的能力。   
    -->    
      
      
    <!-- (4)下面试试,同一个页面有多个from的情况   
    这里先试试多个form、有的form中仅有一个文本输入框,有的form中则有多个文本输入框   
    < form   name = 'frm1'   action = "http://www.baidu.com" >    
        < input   type = "text"   name =  "userName" />    
        < input   type = "text"   name =  "passWord" />    
    </ form >    
    < form   name = 'frm2'   action = "http://www.google.cn" >    
        < input   type = "text"   name =  "userName" />    
    </ form >    
    < form   name = 'frm3'   action = "http://www.yahoo.com" >    
        < input   type = "text"   name =  "userName" />    
        < input   type = "text"   name =  "passWord" />    
    </ form >    
    经试验,只有 frm2 具有自动提交的特性。   
      
    看来:只要页面中的某个表单中仅有一个文本输入框,则其页面就具有自动提交的特性了。   
    -->    
    <!--(5)如何防止页面自动提交?!   
    很简单!只要在from 中加上 onSubmit = "return false;" 就OK了!   
    < form   name = 'frm1'   action = "http://www.baidu.com" >    
        < input   type = "text"   name =  "userName" />    
        < input   type = "text"   name =  "passWord" />    
    </ form >    
    < form   name = 'frm2'   action = "http://www.google.cn"   onSubmit = "return false;" >    
        < input   type = "text"   name =  "userName" />    
    </ form >    
      
    呵呵,经过onSubmit = "return false;"  改造后,frm2不再自动提交了!   
    -->    
    <!--(6)下边看看input type = "submit" 对提交表单的影响   
      
    这里不拿仅有一个文本框的form进行测试了(如果不用onSubmit = "return false;"  ,它是自动提交的)   
    < form   name = 'frm1'   action = "http://www.baidu.com" >    
        < input   type = "text"   name =  "userName" />    
        < input   type = "text"   name =  "passWord" />    
        < input   type = "submit"   value = "提交1" />    
    </ form >    
    < form   name = 'frm2'   action = "http://www.google.com" >    
        < input   type = "text"   name =  "userName" />    
        < input   type = "text"   name =  "passWord" />    
        < input   type = "submit"   value = "提交2" />    
    </ form >    
    则,分别鼠标点击frm1、frm2中的文本框并按回车后,会根据各自的action来进入不同的页面   
    -->    
    <!--(7)下边看看input type = "button" 对提交表单的影响   
    < form   name = 'frm1'   action = "http://www.baidu.com" >    
        < input   type = "text"   name =  "userName" />    
        < input   type = "text"   name =  "passWord" />    
        < input   type = "button"   value = "提交1" />    
    </ form >    
    < form   name = 'frm2'   action = "http://www.google.com" >    
        < input   type = "text"   name =  "userName" />    
        < input   type = "text"   name =  "passWord" />    
        < input   type = "button"   value = "提交2" />    
    </ form >    
      
    哈哈,分别鼠标点击frm1、frm2中的文本框并按回车后,都没有反应!看来button这样是不能提交表单的   
    -->    
      
    <!--(8)使用 "button" 来提交表单   
      
    < form   name = 'frm'   action = "http://www.baidu.com" >    
        < input   type = "text"   name =  "userName" />    
        < input   type = "text"   name =  "" />    
        < input   type = "button"   value = "提交1"   onclick = "exec('http://www.google.com')" />    
    </ form >    
      
    userName 、passWord处都填写数据,点击button。   
    OK!连上google了,IE地址栏显示:http://www.google.com/?userName = 1passWord =1   
    -->    
    <!-- (9)使用 "button" 来提交表单——参考js exec1()中的相关注释     
     
    -->    
    < form   name = 'frm'   action = "http://www.google.com" >    
        < input   type = "text"   name =  "userName" />    
        < input   type = "text"   name =  "passWord" />    
        < input   type = "button"   value = "提交1"   onclick = "exec1('http://www.google.com')" />    
    </ form >    
    < form   name = 'frm1'   action = "http://www.hao123.com" >    
        < input   type = "text"   name =  "userName" />    
    </ form >    
      
    </ body >    
    </ html >    
    

      总结期间找了些关于onsubmit="return false;"的文章,作为资料也贴在下边。 

    URL:http://bbsanwei.javaeye.com/blog/271547 

    onSubmit的使用 
    在web开发中,我们经常会遇到,一点回车键表单就自己提交的问题,能不能禁用回车键呢,答案是肯定的. 


    Html代码 
    <from action="" method="post" onSubmit="return false">   
    ...............    
    </from>  


    如果想在表单提交时,进行验证 

    Html代码 
    <html>   
    <head>   
    <script lanuage="javascript">   
    function check()    
    {    
    //验证不通过时    
    return false;    
    }    
    </script>   
    </head>   
    <body>   
    <from action="" method="post" onSubmit="return check()">   
    ...............    
    </from>   
    </body>   
    </html>  

    <html> 
    <head> 
    <script lanuage="javascript"> 
    function check() 

    //验证不通过时 
    return false; 

    </script> 
    </head> 
    <body> 
    <from action="" method="post" onSubmit="return check()"> 
    ............... 
    </from> 
    </body> 
    </html> 


    这样就会对表单进行验证再进行提交 

    要注意的是,千万不能写成 

    Html代码 
    <from action="" method="post" onSubmit="check()">   
    ...............    
    </from>  


    因为check()不通过后会返回false, 因为onsubmit属性就像是<form>这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true,所以还是相当于验证通过 
    记得对表单验证一定要写成这样 

    Html代码 
    <from action="" method="post" onSubmit="return check()">   
    ...............    
    </from> 

  • 相关阅读:
    QTP11安装包 免费汉化版 / QTP11破解版下载
    linux查看操作系统版本、内存信息
    Oracle 性能优化总结
    CV-物体检测-tensorflow
    pytest使用-文火微烹pytest
    高科技通缩和比特币投资
    格局观修炼
    陈春花推荐的三本书是什么 back to basic -- management
    长期价值主义
    参与感,对于一个人究竟有多重要?
  • 原文地址:https://www.cnblogs.com/oxspirt/p/5033196.html
Copyright © 2011-2022 走看看