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