JavaScript表单
43 表单构成
44 访问表单中的文本框内容
45 动态复制文本框内容
46 侦测文本框的变化
47 访问选中的Select
48 动态增加Select项
49 验证表单字段
50 验证Select项
51 动态改变表单的action
52 使用图像按钮
53 表单数据的加密
1
<form method=”post” action=”target.html” name=”thisForm”>
2
<input type=”text” name=”myText”>
3
<select name=”mySelect”>
4
<option value=”1”>First Choice</option>
5
<option value=”2”>Second Choice</option>
6
</select>
7
<br>
8
<input type=”submit” value=”Submit Me”>
9
</form>

2

3

4

5

6

7

8

9

44 访问表单中的文本框内容
1
<form name=”myForm”>
2
<input type=”text” name=”myText”>
3
</form>
4
<a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>

2

3

4

45 动态复制文本框内容
1
<form name=”myForm”>
2
Enter some Text: <input type=”text” name=”myText”><br>
3
Copy Text: <input type=”text” name=”copyText”>
4
</form>
5
<a href=”#” onClick=”document.myForm.copyText.value = document.myForm.myText.value;”>Copy Text Field</a>

2

3

4

5

46 侦测文本框的变化
1
<form name=”myForm”>
2
Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>
3
</form>

2

3

47 访问选中的Select
1
<form name=”myForm”>
2
<select name=”mySelect”>
3
<option value=”First Choice”>1</option>
4
<option value=”Second Choice”>2</option>
5
<option value=”Third Choice”>3</option>
6
</select>
7
</form>
8
<a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>

2

3

4

5

6

7

8

48 动态增加Select项
1
<form name=”myForm”>
2
<select name=”mySelect”>
3
<option value=”First Choice”>1</option>
4
<option value=”Second Choice”>2</option>
5
</select>
6
</form>
7
<script language=”JavaScript”>
8
document.myForm.mySelect.length++;
9
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
10
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;
11
</script>

2

3

4

5

6

7

8

9

10

11

49 验证表单字段
1
<script language=”JavaScript”>
2
function checkField(field) {
3
if (field.value == “”) {
4
window.alert(“You must enter a value in the field”);
5
field.focus();
6
}
7
}
8
</script>
9
<form name=”myForm” action=”target.html”>
10
Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”>
11
<br><input type=”submit”>
12
</form>

2

3

4

5

6

7

8

9

10

11

12

50 验证Select项
1
function checkList(selection) {
2
if (selection.length == 0) {
3
window.alert(“You must make a selection from the list.”);
4
return false;
5
}
6
return true;
7
}

2

3

4

5

6

7

51 动态改变表单的action
1
<form name=”myForm” action=”login.html”>
2
Username: <input type=”text” name=”username”><br>
3
Password: <input type=”password” name=”password”><br>
4
<input type=”button” value=”Login” onClick=”this.form.submit();”>
5
<input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>
6
<input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>
7
</form>

2

3

4

5

6

7

52 使用图像按钮
1
<form name=”myForm” action=”login.html”>
2
Username: <input type=”text” name=”username”><br>
3
Password: <input type=”password”name=”password”><br>
4
<input type=”image” src="/”login.gif"” value=”Login”>
5
</form>

2

3

4

5

53 表单数据的加密
1
<SCRIPT LANGUAGE='JavaScript'>
2
<!--
3
function encrypt(item) {
4
var newItem = '';
5
for (i=0; i < item.length; i++) {
6
newItem += item.charCodeAt(i) + '.';
7
}
8
return newItem;
9
}
10
11
function encryptForm(myForm) {
12
for (i=0; i < myForm.elements.length; i++)
13
{
14
myForm.elements[i].value = encrypt(myForm.elements[i].value);
15
}
16
}
17
18
//-->
19
</SCRIPT>
20
<form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
21
Enter Some Text: <input type=text name=myField><input type=submit>
22
</form>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

我来自:向东博客
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步