今天在实现业务的时候，jsp页面总是自动提交。
在页面中有多个
input type=”text”
的文本输入框的情况下没有问题，但是当
页面中有只有一个文本框的情况下()，就会出现此问题.
后来在form 中添加：οnsubmit=”return false;”问题终于解决。
<form name=”frm” method=”post” οnsubmit=”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
=
1
passWord
=
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
>
总结期间找了些关于οnsubmit=”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
>
-
-
版权声明：本文为jackpk原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。