動態HTML表單條目

是否可以製作一個HTML表單來響應用戶想要發送的事件數量？動態HTML表單條目

也就是說，我現在擁有的是：

<form ...> 
    <select ...> 
     <option>1</option> 
     <option>2</option> 
     ... 
    </select> 
    *** 
</form>

當用戶選擇的選項之一，***要有

<input type="text" ...>

出現的用戶選擇的次數。

也就是說，如果用戶從選項中選擇5，則用戶應該看到5個輸入選項。如果他改變了主意，選擇2，那麼頁面應該相應地更新以僅顯示2個輸入選項。

===== [編輯] =====

我已經改變了代碼，具有輸入只是文本。我有的代碼不起作用。它不更新輸入字段的數量。

<script type="text/javascript"> 
<!-- 
function updateOptions(nvars) 
{ 
    var n = nvars; 
    while(n>0) { 
     var newdiv1 = "<div>Var name: <input type=\"text\" name=\"var-name\"><br></div>"; 
     var newdiv2 = "<div>Var type: <input type=\"text\" name=\"var-type\"><br></div>"; 
     newdiv1.appendTo("#bloo"); 
     newdiv2.appendTo("#bloo"); 
     n--; 
    } 
} 
//--> 
</script> 

<h3>Create a table in the test db!<h3> 
<form name="f1" method="POST" action="createTable.php"> 
     Name of Table: <input type="text" name="table-name"><br> 
     No of vars: <input type="text" name="numvars" onChange="updateOptions(this.value)"><br> 
     <div id="bloo"></div> 
</form>

它工作時，我有一個文件撰寫代替appendTo，但我基本上是想保持不變節省額外的輸入字段的用戶更改值後的頁面numvars字段。

來源

2009-11-17 user5243421

這是一個好主意，當你想讓用戶能夠上傳任意數量的文件或類似的東西。你可以用JavaScript做到這一點：

有一個空的DIV附近的SELECT
綁定到選擇元素
在功能上「的onchange」事件的功能，閱讀選擇元素的值和：
- 空的DIV
- 創建一封quivalent <輸入類型的DIV

你需要的代碼裏面= 「文本」 >的數量？如果你這樣做，原型好嗎？

好的，對不起，遲到了，最近很多工作要做。

以下內容應該足以讓您獲得創意。儘管如此，你將不得不學習JS，我甚至不知道你在用什麼來處理你的問題。

<html> 
    <head> 
    </head> 
    <body> 
     <form> 
      <select id="num" value="1"> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option> 
       <option>5</option> 
      </select> 

      <div id="container"> 
       <p> 
        <input type="text" name="var-name" /> 
        <input type="text" name="var-type" /> 
       </p> 
      </div> 
     </form> 


     <script type="text/javascript"> 
      var selectElm = document.getElementById('num'); 
      var containerElm = document.getElementById('container'); 

      var update = function() { 
       containerElm.innerHTML = ''; 
       for (var i = 0, l = selectElm.value; i < l; ++i) { 
        containerElm.innerHTML += '<p><input type="text" name="var-name" /><br /><input type="text" name="var-type" /></p>'; 
       } // add a number of couples of <input> equal to selectElm.value 
      } 

      //the following stuff says that when <select> changes the function called "update" must fire. Most of the code is for compatibility across browsers. 
      var listen, evt; 
      if (document.attachEvent) { 
       listen = 'attachEvent'; 
       evt = 'onchange' ; 
      } else { 
       listen = 'addEventListener'; 
       evt = 'change'; 
      } 
      try { 
       selectElm[listen](evt, update); 
      } catch (e) { 
       selectElm[listen](evt, update, false); 
      } 
      // You do the same in Prototype with a single line: 
      // selectElm.observe('change', update); 
      // jQuery also requires only a single line of code. 

     </script> 
    </body> 
</html>

來源

2009-11-17 08:15:51

如果不需要太多時間，一些代碼會爲我節省一段時間。 – user5243421 2009-11-17 08:24:56

我剛學過javascript，所以我不確定Prototype是什麼。 – user5243421 2009-11-17 08:35:05

對不起，在忙碌的一天工作，我會看看我是否可以寫下一些東西。 – 2009-11-17 15:12:02

是使用下拉輸入字段的onChange事件並顯示/隱藏您的輸入字段。

來源

2009-11-17 08:13:04

動態HTML表單條目

回答

相關問題