[求助] HTML 語法求助, 關於動態新增 Form 內的物件.

Dragoon

被困住好一陣子了, 手邊的工具書都沒找到解法,
印象中有這個功能的網站一下子都找不到了！
我想要做的功能是動態新增 Form 內的物件,
假設現在已經有 3 個了

1. 
   
2. 1 <input type="text" name="Location1" size=49 value=""><br>
   
3. 2 <input type="text" name="Location2" size=49 value=""><br>
   
4. 3 <input type="text" name="Location3" size=49 value=""><br>
   

複製代碼

, 我要做讓使用者按下 more 連接到一個 javascript function 可跑出第四個, 再按可以跑出第五個, 以下類推,
當然會需要一個 Count 來計算數量比較方便

1. 
   
2. <input type="hidden" name="LocationCount" value="3">
   

複製代碼

我翻遍了 Div 的語法就是找不到動態新增 div 內內容的語法, 我印象中是有這樣的寫法的哩~
還是有什麼其他作法可以克服?

感謝!!

阿輝

應該是設成隱藏的區域
按鈕偵測去顯示該區域 ?

MX 應該就可以做... 我做做看

阿輝

等等
要無限新增... @@

這好像就想不出來... @@|||

用 PHP 如何?

Dragoon

Originally posted by 阿輝 at 2004-6-17 08:22 PM:
等等
要無限新增... @@

這好像就想不出來... @@|||

用 PHP 如何?

案主有這樣的需求 ... so ... 要做到動態數量的~

用 Server Side 來做就 OK 啦, 可是考慮到 Server Side 還要換頁這個解法就沒這麼漂亮了 ...

當然也有偷雞手法, 先藏個 10 個空的, 每按一下顯示一個, 如果真的找不到解法我就先這樣用頂一下 ...

[ Last edited by Dragoon on 2004-6-17 at 20:28 ]

阿輝

我想到的作法

1. 1 <input type="text" name="Location1" size=49 value=""><br>
   
2. 2 <input type="text" name="Location2" size=49 value=""><br>
   
3. 3 <input type="text" name="Location3" size=49 value=""><br>
   
4. 
   
5. ...
   
6. 
   
7. n <input type="text" name="Locationn" size=49 value=""><br>

複製代碼

設一個啟始變數 n，用 PHP 用迴圈動態產生上面的清單
more 按鈕每按一次 n+1 並重新導向本頁

照理說應該 Java Script 也能做到才對

Dragoon

Originally posted by 阿輝 at 2004-6-17 08:27 PM:
我想到的作法

1. 1 <input type="text" name="Location1" size=49 value=""><br>
   
2. 2 <input type="text" name="Location2" size=49 value=""><br>
   
3. 3 <input type="text" name="Location3" size=49 value=""><br>
   
4. 
   
5. ...
   
6. 
   
7. n <input type="text" name="Locationn" size=49 value=""><br>

複製代碼

設一個啟始變數 n，用 PHP 用迴圈動態產生上面的清單
more 按鈕每按一次 n+1 並重新導向本頁

照理說應該 Java Script 也能做到才對

PHP 容易是因為 PHP 內處理不需要畫面輸出問題, 我的作法是:

邏輯層:
($gForm 是我把 $_POST 整理過後的變數)

1. 
   
2.         if (empty($gForm["LocationCount"])) {
   
3.                 // $gCon->NewEntryCount 是設定 預設數量
   
4.                 $gForm["LocationCount"] = $gCon->NewEntryCount;
   
5.         }
   
6.         $mFormAryLocation = array();
   
7.         for ($mI = 1 ; $mI <= $gForm["LocationCount"] ; $mI++) {
   
8.                 $mFormAryLocation[] = $gForm["Location" . $mI];
   
9.         }
   
10.         $gTpl->assign_by_ref("mFormAryLocation", $mFormAryLocation);
    

複製代碼

以上還可以動手腳固定留 3 個空的讓使用者可以新增, 不過後來我想了想留在修改那邊再做就好

展示層(Smarty):

1. 
   
2. <div ID="Location">
   
3. {{section loop=$mFormAryLocation name=loop}}
   
4. {{$smarty.section.loop.iteration}} <input type="text" name="Location{{$smarty.section.loop.iteration}}" size=49 value="{{$mFormAryLocation[loop]}}"><br>
   
5. {{/section}}</div>
   
6. <input type="hidden" name="LocationCount" value="{{$mFormLocationCount}}">
   

複製代碼

然後透過一個 新增的連結:

1. 
   
2. <a href="javascript:addMore(document.getElementById('Location'), CustomerForm.LocationCount)">更多</a>
   

複製代碼

在 addMore 這個 function 裡面對 div 做手腳:

1. 
   
2. function addMore(mDiv, mVar)
   
3. {
   
4.         該死的 mDiv 給我多生一個 <input type="text"> 出來;
   
5.         無辜的 mVar 加一後乖乖去睡覺;
   
6. }
   

複製代碼

問題就在:
document.write 在頁面丟出後, 不能控制輸出的地方...
div 內要怎麼加東西啊?

還是說根本沒這個語法?

[ Last edited by Dragoon on 2004-6-17 at 20:45 ]

Dragoon

感謝!! 試試後回報!

Dragoon

經過測試後, 沒有問題啦~

謝謝!!

請教一下, JavaScript 用什麼開發工具比較好用? 每次除錯都很傷腦筋, 都用 alert 無法清楚的看出變數使用狀況~

Dragoon

關於 document.getElementById() 這個 function 有相容性問題,
有找到一段語法來處理這個問題,
建議用下面這一段語法取代 document.getElementById:

1. 
   
2. function returnObj(objId) {
   
3.   if (document.layers) { //Netscape 4
   
4.      myObj = eval('document.' + objId);
   
5.   } else if (navigator.userAgent.indexOf("Opera") != -1) { //Opera
   
6.      myObj = eval('document.all.' + objId);
   
7.   } else if (document.all && !document.getElementById) { //IE 4
   
8.      myObj = eval('document.all.' + objId);
   
9.   } else if (document.getElementById) { //Netscape 6 & IE 5
   
10.      myObj = document.getElementById(objId);
    
11.   } else {
    
12.      alert('This website uses DHTML. We recommend you upgrade your browser.');
    
13.   }
    
14.   
    
15.   return myObj;
    
16. }
    

複製代碼

Dragoon

感謝!

難怪 innerHTML 這個語法在 Opera 上有一些問題!
我用這個方法來改寫試試看~