JavaScript表单

43 表单构成

 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> 

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> 

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> 

46 侦测文本框的变化

1<form name=”myForm”>
2 Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>
3</form> 

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> 

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>

49 验证表单字段

 1<script language=”JavaScript”>
 2function 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> 

50 验证Select项

1function 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}

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> 

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>

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>