有初始值的 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>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

示例:
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>

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

31

32

33

34

35

36

37

38

39
