獲取表單的引用
在開始對表單進(jìn)行編程前,必須先獲取表單<form>的引用.有以下方法可以來完成這一操作。
1)采用典型的DOM樹中的定位元素的方法 getElementById(),只要傳入表單的id即可獲得表單的引用:
var vform=document.getElementByIdx(“form1”);
2)還可以用document的forms集合,并通過表單 在form集合中的位置或者表單的name特性來進(jìn)行引用:
var oform=document.forms[0];
var oform=document.forms[“formZ”];
訪 問表單字段
每個(gè)表單字段,不論它是按鈕,文本框還是其它內(nèi)容,均包含在表單的elements集合中.可以用它們的 name特性或者它們在集合中的位置來訪問不同的字段:
Var oFirstField=oForm.elements[0];
Var oTextBox1=oForm.elements[“textBox1”];
此外還可以通過名字來直接訪問字段,如:
Var oTextBox1=oForm.textbox1;
如果名字中有標(biāo)記,則可以使用方括號(hào)標(biāo)記:
Var oTextBox1=oForm[“text box 1”];
最常見的訪問表單字段的方法
最簡單常用的訪問表單元素的方法自然是 document.getElementByIdx(),舉例如下:
<input type="text" name="count"
value="" />
在JS中取得此元素內(nèi)容的代碼為:
var name=document.getElementByIdx("name").value
這種方法無論表單元素處于那個(gè)表單中甚至是不在表單中 都能湊效,一般情況下是我們用JS訪問表單元素的首選.
鑒于document.getElementByIdx比較長,你可以用如下函數(shù)代替它:
function $(id){
return document.getElementByIdx(id);
}
把 這個(gè)函數(shù)放在共有JS庫中,在jsp頁面通過如下方法引用它:
<head>
<title>"記賬系統(tǒng)"添加資源頁面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="web/js/check.js" type="text/javascript"></script>
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
type="text/css" />
</head>
此后你就可以直接使用$訪問表單元素中的內(nèi)容:
var name=$("name").value;
表單字段的共性
以下是所有表單字段(除了隱藏字段)
Disabled可以用來獲取或設(shè)置表單控件是否被禁用.
Form特性用來指向字段所 在的表單.
Blur()方法使表單字段失去焦點(diǎn).
Focus()方法使表單字段獲得焦點(diǎn).
當(dāng)字段失去焦點(diǎn)是,發(fā)生blur 事件,執(zhí)行onblur事件處理程序.
當(dāng)字段獲取焦點(diǎn)時(shí),發(fā)生focus事件,執(zhí)行onfocus事件處理函數(shù).
當(dāng)頁面載入時(shí)將焦點(diǎn) 放在第一個(gè)字段
在body代碼中如此書寫:
<body onload=“focusOnFirstElm()”>
JS 函數(shù)如下書寫:
Fucntion focusOnFirstElm(){
document.forms[0].elements[0].focus();
}
如果第一個(gè)字段不是隱藏字段此方法就是湊效的,如 果是的話把elements的下標(biāo)改成非隱藏字段的下標(biāo)即可.
控制表單只被提交一次
由于Web的響應(yīng)問題,用戶有可能會(huì)點(diǎn)擊多次提交按鈕從而創(chuàng)建重復(fù)數(shù)據(jù)或是導(dǎo)致錯(cuò)誤,我們可以使用 JS對提交按鈕進(jìn)行設(shè)置以讓表單只被提交一次。
<input type=“submit” value=“提交” onclick=“this.disabled=true;this.form.submit()”/>
這里在點(diǎn)擊提交按鈕時(shí)執(zhí)行了兩句 JS代碼,一次是this.disabled=true;這是讓提交按鈕被禁用;一次是this.form.submit()這是提交這個(gè)按鈕所在的表單。
檢查用戶在表單元素中的按鍵
為 控件添加 onkeydown事件處理,然后在函數(shù)查看keyCode,就能知道用戶的按鍵,代碼如下:
<input type="text" name="test"
value="" onkeydown="testkey(this,event)"/>
JS代碼如下:
function testkey(obj,event){
alert(event.keyCode);
}
這種技巧在改善用戶體驗(yàn) 如按回車鍵提交表單時(shí)很常用。

]]>