在Javascript 中,頁面上的每一對
############注意:
i > 每個表單元素應盡量使用
#ii > 每個表單元素應指派name 屬性 和id 屬性。
name 屬性:用來將資料提交至伺服器;
的使用等。
( name 屬性和id 屬性應該盡可能使用相同的或相關的值。)
在客戶端,Javascript 對表單及表單元素的操作,更青睞使用其name 屬性。
因為,對於某些特定的表單元素(如:單選按鈕等),使用其name 屬性更容易取得元素值,也更方便向伺服器傳送資料!
Javascript 操作form 表單元素,比較少用的屬性:
defaultChecked 設定或取得複選框或單選鈕的狀態。
defaultValue 設定或取得物件的初始內容。
disabled 設定或取得控制項的狀態。
提交表單
提交表單的範例:
|
i > 如果使用submit( ) 方法來提交表單,則不會觸發
這是與使用提交元素不同的地方;
ii > 可以在按鈕的提交或點擊事件中,使用disabled 屬性來停用使用者重複點擊提交按鈕的行為,
減少伺服器的回應負擔;
設定文字方塊
i > 控制文字方塊的字元數
注意:多行文字方塊
ii > 滑鼠經過時,自動選取文字方塊
window.onload = function(){ |
# var txtName = document. getElementsByName("myName")[0]; |
txtName.onmouseover = function(){ |
##
#取得選取的單選按鈕& 設定單選按鈕被選取 |
//取得選取項目 |
if(aChoices[i].checked) if(aChoices[i].checked) |
# break; //若發現了選取項目則退出 |
alert("您選取的「+aChoices[i].value); |
} |
//設定選取項目 |
需要保證同一組單選按鈕的name 屬性值相同即可。
設定複選框
#設定複選框的「全選」、「全不選」及「反選」功能
function changeBoxes( _action){ |
var myForm = document.forms["myForm1"]; |
//myCheckbox 為所有複選框的name屬性值 |
var oCheckBox = myForm.myCheckbox; |
for(var i=0 ;i |
if(_action < |
設定下拉列錶框
下拉列錶框的multiple 屬性用於設定或取得下拉列表框是否可以選取多個選項。
下拉列錶框預設只能選取一項,若要設定為可以選取多項,則
type 屬性:javascript 語言根據type 屬性的值獲得下拉列錶框select 控制項的類型。
type 屬性的值為:select-multiple 或select-one (注意:下拉列錶框的類型由multiple 屬性控制)
i > 查看下拉列錶框的選項(單一選項& 多重選項)
# function getSelectValue(_myselect){ | |||||||||||||||
var oForm = document.forms["myForm1"]; | |||||||||||||||
//根據參數(下拉列錶框(的name屬性值)取得下拉式選單項目 | |||||||||||||||
var oSelectBox = oForm.elements[_myselect]; | |||||||||||||||
//判斷是單選還是多重選擇 | |||||||||||||||
if(oSelectBox.type == "select-one"){ | |||||||||||||||
var iChoice 選取項目 | |||||||||||||||
alert("單選,您選取了" + oSelectBox.options[iChoice].text); | |||||||||||||||
} | |||||||||||||||
for(var i=0;i | |||||||||||||||
Box ) | |||||||||||||||
Box . selected)//若選取 | |||||||||||||||
//壓入陣列中 | |||||||||||||||
); | |||||||||||||||
//輸出結果 | |||||||||||||||
alert("多重選,您選擇了:" + aChoices.join()); | |||||||||||||||
} | |||||||||||||||
} | |||||||||||||||
# | |||||||||||||||
< option value="b">BB | |||||||||||||||
# | |||||||||||||||
追加新選項到最後 |
function AddOption(Box){ //追加選項到最後 |
var oForm = document.forms["myForm1"]; |
var oBox = oForm. |
# |
var oOption = new Option("乒乓球","Pingpang"); |
插入新選項到指定位置
# |
function AddOption(_select,_num){ |
var oForm = document.forms["myForm1"]; |
# var oBox = oForm.elements[_select]; |
var oOption = new Option("text值","value值"); |
//相容IE7,先新增選項到最後,再移動 |
oBox.options[oBox.options.length] = oOption; |
# oBox.insertBefore(oOption,oBox.options[_num]); |
} |
#< /script> |
注意:如果直接使用insertBefore( ) 方法插入選項,將會在IE 中出現一個空選項的bug。為了解決IE 的這個bug ,只能使用先追加新選項到末尾,然後再使用insertBefore( ) 方法將其移到對應的位置。
類似這樣:為了跳過瀏覽器的某些bug 或限制,實現預定目的的小技巧,通常稱之為hack 。
iii > 取代某一選項
//替換選項 |
#function ReplaceOption(_select,_num){ |
# var oForm = document.forms["myForm1"]; |
var oBox = oForm.elements[_select];#f new Option("text值","value值"); |
oBox.options[_num] = oOption; //取代第_num 個選項 |
#} |
iv > 刪除某一選項