form.submit and choice send form

在 Script 中傳送表單：form.submit() 方法範例

沒有 Submit 按鈕也能傳送表單資料

曾經有個網友向我問這個問題，他設計的網頁必須使用 FORM 向 Web Server 登錄瀏覽者資料，但他覺得 FORM 表單的 SUBMIT 按鈕太單調，他想用自己設計的圖片去做為傳送啟動鈕，不知該如何做？現在請你先試範例，我再來解說，請在下面表單的小圖示按鈕來傳送表單資料。

圖形傳送鈕範例
請輸入姓名：請輸入年齡：

TYPE=IMAGE or submit()

其實要用圖形取代 Submit 按鈕，最簡單的方式是在表單中啟用 TYPE=IMAGE 的 INPUT 標籤，如：

<INPUT TYPE=IMAGE SRC="圖片 URL">

那麼當我們用滑鼠按這標籤時，就跟 TYPE=SUBMIT 型態的 INPUT 一樣，可以送出表單資料。但是這個型態的 INPUT 在 Navigator 中對 Script 支援度卻很差，不但無法感知任何事件，甚至連將滑鼠游標轉換手形的功能都沒有，完全無法提醒瀏覽者這個圖示是個按鈕。至於 Explorer 的 <BUTTON> 標籤就不提了，因為 Navigator 不認得。這時我們就要採用第二個辦法，那就是使用 form.submit() ，表單物件傳送方法，它的使用方式是：

document.forms.想要傳送的表單名稱.submit();

因此不管是按鈕、圖片、聯結，只要能接受瀏覽者事件啟動，就可以傳送表單，而不管此啟動標籤是否是表單的一部份。而本範例中，就是用一個 LINK 標籤包住一個 IMG Tag ，然後用 onclick 事件來傳送表單。

<FORM NAME="myform" METHOD="GET" ACTION="research.htm">

        <!-- ... 其他標籤設定 ... // -->

        <A HREF="#"
        <!-- ... 其他事件的 Script 設定 ... // -->
         onclick="document.forms.myform.submit();return false;">
        <IMG NAME="img1" SRC="uploada.gif" BORDER="0" WIDTH=80 HEIGHT=50></A>
</FORM>

多表單的選擇傳送

既然 formname.submit() 方法可以把指定的 form 傳送出去，那麼一個網頁上就可以擺一個以上的表單，然後由瀏覽者決定傳送那一個表單，以及屬於一個 form 中的 submit 鈕，不必傳送自己的父表單，而可以去轉而傳送網頁上其他表單。譬如下面這個範例，瀏覽者可以自行決定要成為一般會員或金卡會員，而送出繁簡兩種不同的表單資料，你可以分別試一下看看回應表單顯示傳送資料的不同。

**何處塵埃會員資料登錄**
基本會員資料	金卡會員資料
輸入姓名：居住地區：輸入年齡：性別：女男	請輸入代號：請輸入密碼：
要升級為金卡會員嗎？是否

一網頁多表單設計

其實整個何處塵埃會員登錄資料表是由三個 form 區段共同構成的，它們分別是：

<!-- 基本會員資料表 // -->
<FORM NAME="membera" METHOD="GET" ACTION="research.htm">
        輸入姓名：
        <INPUT TYPE=TEXT NAME="name" SIZE="9" VALUE="Adams Smith"><BR>
        居住地區：
        <INPUT TYPE=TEXT NAME="area" SIZE="9" VALUE="Taiwan"><BR>
        輸入年齡：
        <INPUT TYPE=TEXT NAME="age" SIZE="3" VALUE="40"><BR>
        性        別：
        <INPUT TYPE=RADIO NAME="sex" CHECKED VALUE="female"> 女
        <INPUT TYPE=RADIO NAME="sex" VALUE="male"> 男
        <INPUT TYPE=HIDDEN NAME="goldden">
</FORM>

<!-- 金卡會員資料表 // -->
<FORM NAME="memberb" METHOD="GET" ACTION="research.htm">
        <INPUT TYPE=HIDDEN NAME="name">
        <INPUT TYPE=HIDDEN NAME="area">
        <INPUT TYPE=HIDDEN NAME="age">
        <INPUT TYPE=HIDDEN NAME="sex">
        <INPUT TYPE=HIDDEN NAME="goldden">
        請輸入代號：
        <INPUT TYPE=TEXT NAME="id" SIZE=8 VALUE="guest"><BR>
        請輸入密碼：
        <INPUT TYPE=PASSWORD NAME="pass" SIZE=8 VALUE="guest"><BR>
</FORM>

<!-- 傳送設定表 // -->
<FORM NAME="add">
        <BR>要升級為金卡會員嗎？<BR>
        <INPUT TYPE=RADIO NAME="rd1" VALUE="yes"> 是
        <INPUT TYPE=RADIO NAME="rd1" CHECKED VALUE="no"> 否<BR>
        <INPUT TYPE=SUBMIT VALUE="傳送登錄資料" onclick="MultiFormSend();return false;"
</FORM>

如何選擇傳送表單

由上面三個 form 來看，相信你不難發覺，實際上要選擇傳送的是 form membera 和 form memberb，至於 form add 則只是提供一個選擇標籤，以及一個傳送表單按鈕而已，本身它的資料是不送出去的。當使用者在 form add 按下 Submit 鈕後，onclick 的 Scriipt 設定會轉而執行一個我們設計的 MultiFormSend() 函數。在這個函數中我們首先要判斷的就是瀏覽者選擇的是要加入一般會員還是金卡會員？因此我們可以這麼安排：

function MultiFormSend()
{
    /* 表單 forms.add 中的 Radio 選項 rd1 ，是供使用者設定是否加入金卡會員
       的選鈕，所以先取其值加以判斷要傳送那個表單。 */
    var sender=document.forms.add;
    var isvip=(sender.rd1[0].checked)?sender.rd1[0].value:sender.rd1[1].value;

    /* ...... 其他 Script 敘述 ...... */
}

我們在 HTML 裏安排 forms.add 的 rd1[0] 值是 "yes"，rd1[1] 值是 "no"，用變數 isvip 取得 yes or no 後，就可以選擇要把那個 form submit，例如：

function MultiFormSend()
{
    /* ...... 其他 Script 敘述 ...... */

    /* 如果瀏覽者選否，則用 sendform 變數參照會員基本資料表單。 */
    if (isvip=="no") {var sendform=document.forms.membera;}
    else
    /* 如果瀏覽者選是，則用 sendform 變數參照金卡會員資料表單。 */
    {var sendform=document.forms.memberb;}
    /* 把被 sendform 參照到的變數用 submit 方法，從 Script 中傳送表單。 */
    sendform.submit();
}

還有一點要提的就是 forms.memberb 中有一堆 TYPE=HIDDEN 的 INPUT 標籤設定，凡是 HIDDEN 的表單元件，都是無法在網頁顯示出來的，那麼我們為什麼做這樣的安排呢？因為金卡會員和一般會員在基本資料上是一樣的，只是金卡會員多了 id 和 pass 兩個欄位，所以避免使用者輸入兩次資料，我們把所有 forms.membera 的輸入欄位在 forms.memberb 中用 HIDDEN 也保留一份，到使用者選擇加入金卡會員時，我們在把基本會員的各項輸入複製到金卡會員的 HIDDEN 欄位裏，這時 submit ，就不會只送 id 和 pass 兩個欄位，而是所有基本會員欄位資料，加上 id 和 pass 兩項。至於兩個 form 中各欄位值的複製，你可以用下列方式：

    if (isvip=="no") {var sendform=document.forms.membera;}
    else
    /* basic 參照基本會員表單，sendform 參照金卡會員表單。
       然後一個一個把相對應欄位值從 membera 複製到 memberb。 */
    {var basic=document.forms.membera;
     var sendform=document.forms.memberb;
     sendform.name.value=basic.name.value;
     sendform.area.value=basic.area.value;
     sendform.age.value=basic.age.value;
     sendform.sex.value=(basic.sex[0].checked)?basic.sex[0].value:basic.sex[1].value;}

好了，經過這樣體貼的設計，既不會有表單雜亂的感覺(事實上瀏覽者都會錯覺他只在操作一個表單而已)，而且瀏覽者省下重覆輸入動作，你的 Web Server 也絲毫沒漏掉必要的訊息。所以用 Script 操作 form.submit() ，可不只功用一點點喔。

回前頁