首頁
文章清單
RSS 
|
到目前為止，我們能使用 JavaScript 來取得使用者輸入在表單文字欄位中的值，取得這些值能作什麼用呢？或者這麼問：為什麼要用 JavaScript 來取得表單中元件的值呢？
JavaScript 是一種「非編譯式的程式語言」這句話有點深奧，簡單的說，凡是 Script 語言都沒辦法編譯成可執行的程式，所以一般我們把 Script 稱為「描述語言」，JavaScript 則是依 Java 為基底所發展出來的描述語言。
描述語言的特性是：在執行時，才會針對內容進行偵錯，如果語法沒有錯誤，在執行時才能找到「執行時的錯誤（Runtime error）」，而描述語言以 JavaScript 而這，是在用戶端執行，也就是使用瀏覽器來執行，因此，用戶端的瀏覽器種類和瀏覽器對 JavaScript 的解釋，有可能略有不同，尤其涉及到 HTML 元件部份，這就造成了許多網頁只能在 IE 裡瀏覽才能「正確」顯示原設計者想表達的。
目前，我們想接櫫的目標，就是簡單達到各種瀏覽器都能有相等或相類似的視覺效果。話題扯遠了，前述的文字說明，只是為了告訴各位，JavaScript 是在用戶端執行的程式，用戶端的執行程式，不用往返與主機之間的傳輸，自然速度上加快很多，於是 JavaScript 被大量用於表單的驗證，例如檢查是否必填的欄位是否空白？是否應填數字的欄位填入文字？是否使用者指定了某些特定的選項等等。由於是在用戶端執行，交給瀏覽器來判斷，所以瀏覽器解讀的方式是否統一就極為重要。
無奈，答案是尚未統一，於是網頁的開發人員就要多費心思去設計出彈性和相容性更大的網頁，本文所要暢導的，就是提出一份相容於各家瀏覽器的寫法，我們不去判斷瀏覽器這麼解讀是對還是錯，因為標準不一，我們只傳達一個通用的語法，雖然不是最簡潔的，卻是相容性最廣的。
表單元件中，除了文字欄位外，另有多種型式的元件，每種元件以 JavaScript 取得或重設值的方式大同小異，只要明白各種元件有的屬性即可，以下簡要說明各表單元件的屬性(註1)。
| 文字欄位 | <input type="text"> | value |
| 單選核取 | <input type="radio"> | checked |
| length | ||
| 多選核取 | <input type="checkbox"> | checked |
| length | ||
| 清單 | <select> <option> </select> |
selectedIndex |
| options | ||
| options[selectedIndex].text | ||
| options[selectedIndex].value | ||
| 多行文字欄位 | <textarea></textarea> | value |
| 按鈕 | <input type="submit"> <input type="button"> <input type="reset"> |
|
| 檔案欄位 | <input type="file"> | value |
| 密碼欄位 | <input type="password"> | value |
看起來似乎不多，主要是由於未全部列出，不過上述也夠用了。先以清單來舉個使用JavaScript 控制表單的例子。
使用連續兩個清單，當清單一內容變化時，清單二的內容隨之變化，如下：
上述就是這段程式的流程，運用到讀取及設定表單元件屬性值，先把表單內容列出來。
| 1 | <form name="form1" method="post" action=""> | ||
| 2 | <select name="nb" onChange="changeList();"> | ||
| 3 | <option value="1">國產筆記型電腦</option> | ||
| 4 | <option value="2">日系筆記型電腦</option> | ||
| 5 | </select> | ||
| 6 | <select name="brand"> | ||
| 7 | <option value="1">華碩 ASUS</option> | ||
| 8 | <option value="2">IBM</option> | ||
| 9 | </select> | ||
| 10 | </form> | ||
行1及行10指出這是一份表單，同時名稱為 form1，裡面有兩份清單（select），名稱分別為 nb 及 brand，同時，當清單一（nb）在使用者變換選項（onChange）時，就去執行名為 changeList() 的程式。而 changeList() 設計如下(註2)：
| 1 | <script language="javascript"> | 以下開始是 JavaScript 程式 | |||
| 2 | function changeList(){ | 宣告這裡有個程式，名為 changeList | |||
| 3 | if (document.form1.nb.selectedIndex==0){ | 如果使用者選清單 nb 的第一項 | |||
| 4 | document.form1.brand.length=2; | 指定清單 brand 下拉後有兩項 | |||
| 5 | document.form1.brand[0].text=`華碩 ASUS`; | 第一項顯示的文字叫作「華碩 ASUS」 | |||
| 6 | document.form1.brand[0].value=`華碩 ASUS`; | 第一項的值是「華碩 ASUS」 | |||
| 7 | document.form1.brand[1].text=`IBM`; | 第二項顯示的文字叫作「IBM」 | |||
| 8 | document.form1.brand[1].value=`IBM`; | 第二項的值是「IBM」 | |||
| 9 | } | 這段如果結束的陳述了 | |||
| 10 | if (document.form1.nb.selectedIndex==1){ | 如果仗用者選清單 nb 的第二項 | |||
| 11 | document.form1.brand.length=3; | 指定清單 brand 下拉後有三項 | |||
| 12 | document.form1.brand[0].text=`Panasonic`; | 第一項顯示的文字叫作「Panasonic」 | |||
| 13 | document.form1.brand[0].value=`Panasonic`; | 第一項的值是「Panasonic」 | |||
| 14 | document.form1.brand[1].text=`Toshiba`; | 第二項顯示的文字叫作「Toshiba」 | |||
| 15 | document.form1.brand[1].value=`Toshiba`; | 第二項的值是「Toshiba」 | |||
| 16 | document.form1.brand[2].text=`Sony`; | 第三項顯示的文字叫作「Sony」 | |||
| 17 | document.form1.brand[2].value=`Sony`; | 第三項的值是「Sony」 | |||
| 18 | } | 這段如果的陳述結束了 | |||
| 19 | } | 程式 changeList 結束了 | |||
| 20 | </script> | JavaScript 結束了 | |||
簡要說明如下：
行10：如果文件（document ）的表單（form1）的清單（nb）的選項（selectedIndex）是第二項（清單的選項計數是由 0 開始計算）
行11：那麼， 文件（document ）的表單（form1）的清單（brand）的選項數 （length）就指定為 3 項。
行12：其中第一項（brand[0]）的文字顯示為 Panasonic。
行13：第一項的值也為 Panasonic。
其餘各行，我想不用再作太多說明。仍有問題嗎？歡迎留言討論。
註1：未列出所有及完整屬性表，僅就在本文接續中有用的部份提出說明和列舉。(返回)
註2：為使初學者也能順利閱讀本文，以平舖的方式撰寫程式，各位高手見笑了！(返回)
同意轉載，不過麻煩看一下轉載需知
