DreamAngel
如果你希望成功，以恒心為良友，以經(jīng)驗(yàn)為參謀，以小心為兄弟，以希望為哨兵。

隨筆 - 147 文章 - 71 trackbacks - 0

2009年2月

>

日

一

二

三

四

五

六

25

26

27

28

29

30

31

1

6

8

9

10

13

17

18

19

20

21

22

24

26

1

2

3

4

5

6

7

我的其它Blog：
www.cppblog.com/dreamangel/
blog.csdn.net/fjnu_angel/

常用鏈接

留言簿(1)

隨筆分類(146)

隨筆檔案(147)

文章分類(28)

文章檔案(28)

喜歡的Blog

搜索

閱讀排行榜

評論排行榜

JavaScript方法和技巧大全——表單

表單構(gòu)成
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>

訪問表單中的文本框內(nèi)容
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>

動態(tài)復(fù)制文本框內(nèi)容
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>

偵測文本框的變化
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<a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>

動態(tài)增加Select項(xiàng)
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>

驗(yàn)證表單字段
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>

驗(yàn)證Select項(xiàng)
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}

動態(tài)改變表單的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>

表單數(shù)據(jù)的加密
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 飛翔天使閱讀(302) 評論(1) 編輯收藏所屬分類: javascript

FeedBack:

# re: JavaScript方法和技巧大全——表單 2009-02-04 16:00 heyang

總結(jié)的不錯。回復(fù) 更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: Javascript+CSS實(shí)現(xiàn)Flash動態(tài)新聞效果網(wǎng)頁的復(fù)制和防復(fù)制 js獲得table單元格的信息圖片上傳的綜合操作單擊放回上頁的按鈕或使用window.history.go(-1)返回上頁的同時刷新"上頁"技術(shù) 模態(tài)窗口window.showModalDialog 三種彈出對話框的用法實(shí)例 window.open教程 js常用技巧（2012.7.16更新） javascript實(shí)現(xiàn)日期星期的顯示

主站蜘蛛池模板：吉林市| 牙克石市| 公主岭市| 定陶县| 阳泉市| 张家界市| 获嘉县| 彰化市| 凤山市| 禄丰县| 乐都县| 灵寿县| 南投市| 噶尔县| 霍城县| 苍溪县| 凤台县| 宝清县| 宜宾县| 阿尔山市| 阳江市| 尚义县| 新密市| 新田县| 鄂伦春自治旗| 红安县| 台中县| 盖州市| 分宜县| 陇南市| 建湖县| 泸州市| 瑞丽市| 鲁甸县| 大名县| 裕民县| 博罗县| 沙洋县| 休宁县| 马关县| 三门县|