添加和刪除輸入標籤到基於下拉選擇的表格

Question

因此，標題說我試圖添加輸入標籤到一個窗體我已經基於下拉選擇。這是我到目前爲止有：

HTML表單：

<form action="/next" method="POST" > 
    <select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    <div id="count"> 
     <p> 
      <div id="something"> 
       <input type="text" name="text" value="" > 
       <input type="text" name="othertext" value="" > 
      </div> 
     </p> 
     <span id="Room"></span> 
    </div> 
    <input type="submit" value="Next" > 
</form> 

然後就是做我想做的JavaScript：

function dropdownlist(listindex) { 

    document.Room = 0; 
    switch (listindex) { 

    case "1": 

     var check = document.getElementById('added'); 
     if (check != null) { 

      element = document.getElementById('added'); 
      element.parentNode.removeChild(element); 

      element = document.getElementById('added'); 
      element.parentNode.removeChild(element); 

      element = document.getElementById('added'); 
      element.parentNode.removeChild(element); 


     } 

     break; 

    case "2": 


     var check = document.getElementById('added'); 
     if (check == null) { 

      var counter = 1; 

      var newFields = document.getElementById('something').cloneNode(true); 
      newFields.id = 'added'; 
      var newField = newFields.childNodes; 
      for (var i = 0; i < newField.length; i++) { 

       var theName = newField[i].name 
       if (theName) newField[i].name = theName + counter; 
      } 
      var insertHere = document.getElementById('Room'); 
      insertHere.parentNode.insertBefore(newFields, insertHere); 

     } 

     else { 
      var id = document.getElementById('count'); 
      var countid = id.getElementsByTagName('p') 
      var number = countid.length; 

      if (number == 3) { 
       element = document.getElementById('added'); 
       element.parentNode.removeChild(element); 
      }​ 

    }​ 

現在，這是所有工作相當不錯，有可能做更好的方法是這樣的，但由於我對javascript的使用經驗不多，這是我設法做到的最好的方式。現在的問題是：如果用戶添加了3個元素，然後決定返回到2，我必須檢查添加了多少個標籤，我提出的解決方案要求我添加一個< p>標籤在div上創建的每個元素周圍，所以我可以選擇div內的所有< p>標記，然後刪除所需數量的標記。

這個解決方案很好，但後來我注意到，這與我的代碼的早期部分搞砸了，我將每個輸入標籤的名稱更改爲獨特的東西，這是我需要將信息存儲在表單中的東西。

所以任何人都可以建議我一個不同的解決方法來實現此功能？根據用戶選擇添加和刪除輸入標籤，同時爲所有標籤保留唯一的名稱？任何幫助都將不勝感激！

Answer 1

輸入元素的最大數量是否很小？如果是的話，你可能會考慮將他們的所有頁面前面，然後讓他們或根據需要設置自己的知名度：

document.form1.text1.disabled = true;    // or false 

document.form1.text1.style.visibility = "hidden"; // or "visible" 

這需要首先命名您的形式和您的輸入元素：

<form name="form1" ... > 

<input type="text" name="text1" ... > 
<input type="text" name="text2" ... > 

這種方法比通過insertBefore()，removeChild()操縱DOM簡單得多，等