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” >
 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 >  

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}

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 >