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>
Html 中表单提交的一些知识总结——防止表单自动提交,以及submit和button提交表单的区别的更多相关文章
- FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别
在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...
- submit和button提交表单的区别
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- 在javascript中关于submit和button提交表单区别
submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上. ...
- (转)在javascript中关于submit和button提交表单区别
原文来自:http://www.jb51.net/article/42236.htm submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和b ...
- js和jq使用submit方法无法提交表单
昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着 ...
- 表单验证提交——submit与button
之前做东西接触过表单验证提交,但是都是为了完成工作,做完就做完了,没有注过表单验证提交有几种方法,各方法都有啥区别.今天瞎折腾了一下,对他们研究了一下,如下是我个人的理解: submit: 从字面上看 ...
- form表单的两种提交方式,submit和button的用法
1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...
- 触发form表单的两种提交方式,submit和button的用法
1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交. 方法一: 在jsp的前端页面 ...
- 如何不使用 submit 按钮来提交表单?
如果我们不想用 submit 按钮来提交表单,我们也可以用超链接来提交,我们可以这样写代码: <a href=”javascript: document.myform.submit ();” ...
随机推荐
- 《C++ Primer》之面向对象编程(二)
构造函数和复制控制 每个派生类对象由派生类中定义的(非 static)成员加上一个或多个基类子对象构成,当我们构造.复制.赋值和撤销一个派生类对象时,也会构造.复制.赋值和撤销这些基类子对象. 构造函 ...
- Windows使用小技巧
一.windows7 系统切换到 administrator用户 先进入windows 7的安全模式.. (这你应该会吧?) 然后系统会自动调出用administrator 帐号登录.. 密码你必须要 ...
- apt-get 依赖修复
apt-get cleanapt-get update apt-get -f install dpkg --configure -a
- OpenCV ——双线性插值(Bilinear interpolation)
1,原理 在图像的仿射变换中,很多地方需要用到插值运算,常见的插值运算包括最邻近插值,双线性插值,双三次插值,兰索思插值等方法,OpenCV提供了很多方法,其中,双线性插值由于折中的插值效果和运算速度 ...
- Github建站全攻略
本系列为原创,发表在我的github主页,详细介绍了如何在github上建立个人网站,还包括域名绑定.评论功能.站内搜索等辅助功能的介绍,欢迎交流. 一步步在GitHub上创建博客主页(6) 本篇 ...
- dns是什么
域名解析服务器,靠它把你要访问的网址找到然后把信息送到你电脑上.DNS 是域名系统 (Domain Name System) 的缩写,它是由解析器和域名服务器组成的.域名服务器是指保存有该网络中所有主 ...
- 好用的API文档--在线版
安卓在线api http://www.android-doc.com/reference/packages.html
- Qt之打包发布(NSIS详解)
来源:http://blog.sina.com.cn/s/blog_a6fb6cc90101fer8.html 发布方式 Qt发布的时候,通常使用两种方式: (1)静态编译 (2)动态编译 ...
- Hibernate 系列教程14-继承-PerTable策略
Employee public class Employee { private Long id; private String name; HourlyEmployee public class H ...
- iOS 枚举写法
1.第一种 typedef enum { kPRStateNormal = 0, kPRStatePulling = 1, kPRStateLoading = 2, kPRStateHitTheEnd ...