zoukankan      html  css  js  c++  java
  • FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别

    在页面中有多个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>

  • 相关阅读:
    第三章-5、图片左右滑动(动态面板引导页面)
    第三章-8、抽屉导航(动态面板)
    第三章-7、没做
    第三章-6、失败
    第三章-4、瀑布流(动态面板)
    第三章-3、跳转页面&返回页面
    第三章-2、设置条件进行外部连接,跳转页面
    第三章-1、界面原件属性使用(登录界面)
    6、如何将excel表格中的图片批量居中对齐
    React Native
  • 原文地址:https://www.cnblogs.com/jasonxu19900827/p/9543896.html
Copyright © 2011-2022 走看看