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

    最近看书对form中onsubmit="return false;"不明白。现在知道了那样做是要防止表单的自动提交。

    下面这篇文章总结的非常全,自己就直接拿过来修改总结了。

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

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

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

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

    ­<head> ­

    <script>­

    ­function exec(p){ ­

         document.form2.action = p; ­

         document.form2.submit(); ­

    } ­

    function exec1(p){ ­

         document.form2.action = p; ­

         document.form2.submit(); ­

         document.form1.submit();//IE页面定位到最后一个提交的action所对应的页面 ­

         alert("Hello!Oyster");//submit()后边的语句正常执行,这里弹出框文字”Hello!Oyster“ ­

    } ­

    </script> ­

    <!--后面例子中要用到的js函数-->

    </head> ­

    (1) 下边的写法使得表单form能够自动提交 ­

    下边的这个form,将鼠标点进的文本框中然后按键盘的回车键,则页面自动进入百度页面:http://www.baidu.com ­

    <form name='form1' action="http://www.baidu.com"> ­

         <input type="text" name= "UserName1"/> ­

         <input type="hidden" name= "Password1"/> ­

    </form>­

    ­注意:将上边的“<input type="hidden" name= "userName1"/>”去掉或者增加上,也不能改变页面的自动提交! ­

    ­(2)而同样的写法,进行如上的操作,却不会提交 ­

    可能是有两个文本输入框的缘故(注意:上边仅有一个)。 ­

    那如果一个页面中有多个form会怎样??后边有相关试验。­

    ­<form name='form1' action="http://www.baidu.com"> ­

         <input type="text" name= "UserName1"/> ­

         <input type="text" name= "Password1"/> ­

    </form> ­

    ­

    (3)下面试试,同一个页面有多个form的情况 ­

    这里先试试多个form、每个form中仅有一个文本输入框 ­

    <form name='form1' action="http://www.baidu.com"> ­

         <input type="text" name= "UserName1"/> ­

         <input type="hidden" name= "Password1"/> ­

    </form> ­

    <form name='form2' action="http://www.google.cn/"> ­

         <input type="text" name= "UserName2"/> ­

    </form> ­

    经试验,每个form在只有1个文本输入框都具有自动提交的能力。 ­

    (4)下面试试,同一个页面有多个form的情况 ­

    这里先试试多个form、有的form中仅有一个文本输入框,有的form中则有多个文本输入框 ­

    <form name='form1' action="http://www.baidu.com"> ­

         <input type="text" name= "UserName1"/> ­

         <input type="text" name= "Password1"/> ­

    </form> ­

    <form name='form2' action="http://www.google.cn"> ­

         <input type="text" name= "UserName2"/> ­

    </form> ­

    <form name='form3' action="http://www.yahoo.com"> ­

         <input type="text" name= "UserName3"/> ­

         <input type="text" name= "Password3"/> ­

    </form> ­

    经试验,只有 form2 具有自动提交的特性。­

    看来:只要页面中的某个表单中仅有一个文本输入框,则其页面就具有自动提交的特性了。 ­

    (5)如何防止页面自动提交?! ­

    很简单!只要在form 中加上 onSubmit="return false;"就OK了! ­

    <form name='form1' action="http://www.baidu.com"> ­

         <input type="text" name= "UserName1"/> ­

         <input type="text" name= "Password1"/> ­

    </form> ­

    <form name='form2' action="http://www.google.cn" onSubmit="return false;"> ­

         <input type="text" name= "UserName2"/> ­

    </form>­

    呵呵,经过onSubmit="return false;" 改造后,form2不再自动提交了! ­

    (6)下边看看input type="submit"对提交表单的影响­

    这里不拿仅有一个文本框的form进行测试了(如果不用onSubmit="return false;" ,它是自动提交的) ­

    <form name='form1' action="http://www.baidu.com"> ­

         <input type="text" name= "UserName1"/> ­

         <input type="text" name= "Password1"/> ­

         <input type="submit" value="提交1"/> ­

    </form> ­

    <form name='form2' action="http://www.google.com"> ­

         <input type="text" name= "UserName2"/> ­

         <input type="text" name= "Password2"/> ­

         <input type="submit" value="提交2"/> ­

    </form> ­

    则,分别鼠标点击form1、form2中的文本框并按回车后,会根据各自的action来进入不同的页面 ­

    (7)下边看看input type="button"对提交表单的影响 ­

    <form name='form1' action="http://www.baidu.com"> ­

         <input type="text" name= "Username1"/> ­

         <input type="text" name= "Password1"/> ­

         <input type="button" value="提交1"/> ­

    </form> ­

    <form name='form2' action="http://www.google.com"> ­

         <input type="text" name= "UserName2"/> ­

         <input type="text" name= "PassWord2"/> ­

         <input type="button" value="提交2"/> ­

    </form>­

    ­

    哈哈,分别鼠标点击form1、form2中的文本框并按回车后,都没有反应!看来button这样是不能提交表单的 ­

    (8)使用 "button" 来提交表单­

    ­

    <form name="form1" action="http://www.baidu.com"> ­

         <input type="text" name= "userName1"/> ­

         <input type="text" name= "password1"/> ­

         <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='form' action="http://www.google.com"> ­

         <input type="text" name= "userName1"/> ­

         <input type="text" name= "passWord1"/> ­

         <input type="button" value="提交1" onclick="exec1('http://www.google.com')"/> ­

    </form> ­

    <form name='form1' action="http://www.hao123.com"> ­

         <input type="text" name= "userName"/> ­

    </form>­

    </body> ­

    </html>­

    关于onsubmit="return false;"。­

    ­onSubmit的使用 ­

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

    Html代码 ­

    <form action="" method="post" onSubmit="return false">    ­

    ...............     ­

    </form>   ­

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

    Html代码 ­

    <html>    ­

    <head>    ­

    <script lanuage="javascript">    ­

    function check()     ­

    {     ­

    //验证不通过时     ­

    return false;     ­

    }     ­

    </script>    ­

    </head>    ­

    <body>    ­

    <form action="" method="post" onSubmit="return check()">    ­

    ...............     ­

    </form>    ­

    </body>    ­

    </html>   ­

    ­

    <html> ­

    <head> ­

    <script lanuage="javascript"> ­

    function check() ­

    { ­

    //验证不通过时 ­

    return false; ­

    } ­

    </script> ­

    </head> ­

    <body> ­

    <form action="" method="post" onSubmit="return check()"> ­

    ............... ­

    </form> ­

    </body> ­

    </html>­

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

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

    ­Html代码 ­

    <form action="" method="post" onSubmit="check()">    ­

    ...............     ­

    </form>   ­

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

    记得对表单验证一定要写成这样­

    ­Html代码 ­

    <form action="" method="post" onSubmit="return check()">    ­

    ...............     ­

    </form>  

  • 相关阅读:
    装饰器(一)
    函数内置方法
    递归
    函数(三)
    python常用模块
    python模块与包
    python内置函数
    python函数
    python文件处理
    函数编程
  • 原文地址:https://www.cnblogs.com/hualimengyu/p/3682514.html
Copyright © 2011-2022 走看看