随笔 - 147  文章 - 71  trackbacks - 0
<2009年2月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
1234567

常用链接

留言簿(1)

随笔分类(146)

随笔档案(147)

文章分类(28)

文章档案(28)

喜欢的Blog

搜索

  •  

最新评论

阅读排行榜

评论排行榜

表单构成
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>

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

动态复制文本框内容
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 <href=”#” onClick=”document.myForm.copyText.value =  document.myForm.myText.value;”>Copy Text Field</a>

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

访问选中的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<href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>

动态增加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>

验证表单字段
 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>

验证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}

动态改变表单的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>

使用图像按钮
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>

表单数据的加密
 1<SCRIPT LANGUAGE='JavaScript'> 
 2 function encrypt(item) {  
 3   var newItem = ''; 
 4     for (i=0; i < item.length; i++{  
 5       newItem += item.charCodeAt(i) + '.'; 
 6     }
 
 7   return newItem; 
 8 }
 
 9 function encryptForm(myForm) {  
10   for (i=0; i < myForm.elements.length; i++)  {  
11          myForm.elements[i].value = encrypt(myForm.elements[i].value); 
12   }
 
13}

14
</SCRIPT> 
15<form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'> 
16 Enter Some Text: <input type=text name=myField><input type=submit> 
17</form>
posted on 2009-02-03 10:24 飞翔天使 阅读(297) 评论(1)  编辑  收藏 所属分类: javascript

FeedBack:
# re: JavaScript方法和技巧大全——表单 2009-02-04 16:00 heyang
总结的不错。  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: