使用JavaScript動作表單

來源:互聯網
上載者:User

下面講述的是使用javascript對錶單進行簡單基礎的操作:

擷取表單的引用

在開始對錶單進行編程前,必須先擷取表單<form>的引用.有以下方法可以來完成這一操作。
1)採用典型的DOM樹中的定位元素的方法getElementById(),只要傳入表單的id即可獲得表單的引用:
var vform=document.getElementById(“form1”);

2)還可以用document的forms集合,並通過表單在form集合中的位置或者表單的name特性來進行引用:
var oform=document.forms[0];
var oform=document.forms[“formZ”];

訪問表單欄位

每個表單欄位,不論它是按鈕,文字框還是其它內容,均包含在表單的elements集合中.可以用它們的name特性或者它們在集合中的位置來訪問不同的欄位:
Var oFirstField=oForm.elements[0];
Var oTextBox1=oForm.elements[“textBox1”];
此外還可以通過名字來直接存取欄位,如:
Var oTextBox1=oForm.textbox1;
如果名字中有標記,則可以使用方括弧標記:
Var oTextBox1=oForm[“text box 1”];

擷取和設定文本域的內容
例:求和
function getSum(){
 //擷取表單對象
 var theForm=document.forms["myForm2"];
 //計算和,並賦值給第3個文字框
 theForm.elements["sum"].value=eval(theForm.elements["x"].value)+eval(theForm.elements["y"].value);
}
+=

最常見的訪問表單欄位的方法

最簡單常用的訪問表單元素的方法自然是document.getElementById(),舉例如下:
<input type="text" name="count"
      value="" />
在JS中取得此元素內容的代碼為:
var name=document.getElementById("name").value
這種方法無論表單元素處於那個表單中甚至是不在表單中都能湊效,一般情況下是我們用JS訪問表單元素的首選.
鑒於document.getElementById比較長,你可以用如下函數代替它:
function $(id){
     return document.getElementById(id);
}
把這個函數放在共有JS庫中,在jsp頁面通過如下方法引用它:
<head>
<title>"記賬系統"添加資源頁面</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>
此後你就可以直接使用$訪問表單元素中的內容:
var name=$("name").value; 

擷取表單值並將值付給數組
var list=document.getElementsByTagName("input");

var strData="";
//對錶單中所有的input進行遍曆
for(var i=0;i<list.length && list[i];i++)
{
      //判斷是否為文字框
      if(list[i].type=="text")  
      {
          strData +=list[i].value;
          alert(strData);
      }
}

表單欄位的共性

以下是所有表單欄位(除了隱藏欄位)
Disabled可以用來擷取或設定表單控制項是否被禁用.
Form特性用來指向欄位所在的表單.
Blur()方法使表單欄位失去焦點.
Focus()方法使表單欄位獲得焦點.
當欄位失去焦點是,發生blur事件,執行onblur事件處理常式.
當欄位擷取焦點時,發生focus事件,執行onfocus事件處理函數.

當頁面載入時將焦點放在第一個欄位

在body代碼中如此書寫:
<body onload=“focusOnFirstElm()”>
JS函數如下書寫:
Fucntion focusOnFirstElm(){
     document.forms[0].elements[0].focus();
}
如果第一個欄位不是隱藏欄位此方法就是湊效的,如果是的話把elements的下標改成非隱藏欄位的下標即可.

控製表單只被提交一次

由於Web的響應問題,使用者有可能會點擊多次提交按鈕從而建立重複資料或是導致錯誤,我們可以使用JS對提交按鈕進行設定以讓表單只被提交一次。
<input type=“submit” value=“提交” onclick=“this.disabled=true;this.form.submit()”/>
這裡在點擊提交按鈕時執行了兩句JS代碼,一次是this.disabled=true;這是讓提交按鈕被禁用;一次是this.form.submit()這是提交這個按鈕所在的表單。

檢查使用者在表單元素中的按鍵

為控制項添加 onkeydown事件處理,然後在函數查看keyCode,就能知道使用者的按鍵,代碼如下:
<input type="text" name="test"
value="" onkeydown="testkey(this,event)"/>
JS代碼如下:
function testkey(obj,event){
     alert(event.keyCode);
}

這種技巧在改善使用者體驗如按斷行符號鍵提交表單時很常用。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.