随笔:1 文章:12 评论:1 引用:0
沙罗双树园下的三轮明日
BlogJava
首页
发新随笔
发新文章
联系
聚合
管理
有初始值的 form 表单元素重置(reset)解决方案
有初始值的 form 表单在点击默认的 Reset 按钮时,表单元素并不能清空,而是恢复初始值,相信这并不是我们期望的,本文介绍的是用 javascript 解决这一问题的方法。
1
<
script language
=
"
JavaScript
"
type
=
"
text/javascript
"
>
2
<!--
3
//
说明:有初始值的 form 表单元素重置(reset)解决方案
4
5
function
clearForm(formName)
{
6
var
formObj
=
document.forms[formName];
7
var
formEl
=
formObj.elements;
8
for
(
var
i
=
0
; i
<
formEl.length; i
++
)
9
{
10
var
element
=
formEl[i];
11
if
(element.type
==
'submit')
{
continue
; }
12
if
(element.type
==
'reset')
{
continue
; }
13
if
(element.type
==
'button')
{
continue
; }
14
if
(element.type
==
'hidden')
{
continue
; }
15
16
if
(element.type
==
'text')
{ element.value
=
''; }
17
if
(element.type
==
'textarea')
{ element.value
=
''; }
18
if
(element.type
==
'checkbox')
{ element.checked
=
false
; }
19
if
(element.type
==
'radio')
{ element.checked
=
false
; }
20
if
(element.type
==
'select
-
multiple')
{ element.selectedIndex
=
-
1
; }
21
if
(element.type
==
'select
-
one')
{ element.selectedIndex
=
-
1
; }
22
}
23
}
24
//
-->
25
</
script
>
示例:
1
<
form
method
="post"
action
=""
name
="testForm"
>
2
3
<
input
type
="text"
value
="text"
size
="30"
/>
<
br
/>
4
<
textarea
name
=""
rows
="3"
cols
="30"
>
textarea
</
textarea
>
<
br
/>
5
a
<
input
type
="checkBox"
name
="a"
value
="a"
/>
6
b
<
input
type
="checkBox"
name
="a"
value
="b"
checked
="checked"
/>
7
c
<
input
type
="checkBox"
name
="a"
value
="c"
checked
="checked"
/>
8
d
<
input
type
="checkBox"
name
="a"
value
="d"
/>
9
e
<
input
type
="checkBox"
name
="a"
value
="e"
/>
<
br
/>
10
2
<
input
type
="radio"
name
="b"
value
="2"
/>
11
3
<
input
type
="radio"
name
="b"
value
="3"
checked
="checked"
/><
br
/>
12
13
test1:
<
select
name
=""
multiple
="multiple"
>
14
<
option
value
="11111111"
>
11111111
</
option
>
15
<
option
value
="22222222"
selected
="selected"
>
22222222
</
option
>
16
<
option
value
="33333333"
selected
="selected"
>
33333333
</
option
>
17
<
option
value
="44444444"
>
44444444
</
option
>
18
<
option
value
="55555555"
>
55555555
</
option
>
19
</
select
>
20
21
<
br
/><
br
/>
22
23
test2:
<
select
name
=""
>
24
<
option
value
="11"
>
11
</
option
>
25
<
option
selected
="selected"
>
22
</
option
>
26
<
option
value
="33"
>
33
</
option
>
27
<
option
value
="44"
>
44
</
option
>
28
<
option
value
="55"
>
55
</
option
>
29
</
select
>
30
31
<
br
/><
br
/>
32
33
<
input
type
="submit"
value
="Submit"
/>
34
<
input
type
="reset"
value
="Reset"
/>
35
<
input
type
="button"
value
="Button"
/>
36
37
<
input
type
="button"
value
="Javascript Clear"
onclick
="clearForm('testForm')"
/>
38
39
</
form
>
发表于 2010-12-07 17:05
天涯浪侠
阅读(356)
评论(0)
编辑
收藏
所属分类:
页面框架
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
Chat2DB
C++博客
博问
管理
相关文章:
FCKEditor配置文件详解
FCKEditor工具条定制
有初始值的 form 表单元素重置(reset)解决方案
CALENDER
<
2025年4月
>
日
一
二
三
四
五
六
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
常用链接
我的随笔
我的评论
我的参与
最新评论
留言簿
(1)
给我留言
查看公开留言
查看私人留言
随笔档案
2012年4月 (1)
文章分类
Ajax技术(1)
(rss)
SQL查询及优化(2)
(rss)
SSH框架(1)
(rss)
操作系统相关(1)
(rss)
数据库技术
(rss)
服务器技术(4)
(rss)
页面框架(3)
(rss)
文章档案
2011年11月 (1)
2011年10月 (1)
2011年5月 (1)
2011年4月 (7)
2010年12月 (2)
搜索
最新评论
1. re: 关于Oracle将小于1的数字to_char后丢掉0的解决办法[未登录]
good~
--XX
Powered By:
博客园
模板提供
:
沪江博客