動態添加輸入元素以形成

我已經閱讀了許多關於動態添加字段集的博客和文章，但他們都給出了一個非常複雜的答案。我所需要的並不複雜。動態添加輸入元素以形成

我的HTML代碼：

<input type="text" name="member" value="">Number of members: (max. 10)<br /> 
<a href="#" id="filldetails">Fill Details</a>

因此，用戶將進入一個整數值（我檢查使用javascript驗證）在input領域。在點擊Fill Details鏈接時，他會輸入相應數量的輸入字段。我想用javascript來實現這一點。

我不是一個贊成在JavaScript。我在考慮如何通過鏈接檢索用戶在input字段填入的整數並顯示相應數量的輸入字段。

來源

2013-02-13 xan

您可以使用onclick事件處理程序來獲取文本字段的輸入值。請確保你給該領域的獨特id屬性，這樣就可以通過document.getElementById()引用它安全：

如果要動態地添加元素，你應該有一個容器，其中放置它們。例如，一個<div id="container">。通過document.createElement()創建新元素，並使用appendChild()將它們中的每一個添加到容器中。您可能會感興趣的輸出有意義name屬性（如name="member"+i爲每一個動態生成的<input>■如果他們是在一個形式提交。

通知您也可以創建<br/>元素與document.createElement('br')。如果你想只輸出一些文字，就可以使用document.createTextNode()代替。

另外，如果你想每次即將被填充時間來清除容器，你可以使用hasChildNodes()和removeChild()在一起。

<html> 
<head> 
    <script type='text/javascript'> 
     function addFields(){ 
      // Number of inputs to create 
      var number = document.getElementById("member").value; 
      // Container <div> where dynamic content will be placed 
      var container = document.getElementById("container"); 
      // Clear previous contents of the container 
      while (container.hasChildNodes()) { 
       container.removeChild(container.lastChild); 
      } 
      for (i=0;i<number;i++){ 
       // Append a node with a random text 
       container.appendChild(document.createTextNode("Member " + (i+1))); 
       // Create an <input> element, set its type and name attributes 
       var input = document.createElement("input"); 
       input.type = "text"; 
       input.name = "member" + i; 
       container.appendChild(input); 
       // Append a line break 
       container.appendChild(document.createElement("br")); 
      } 
     } 
    </script> 
</head> 
<body> 
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br /> 
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a> 
    <div id="container"/> 
</body> 
</html>

請參閱此JSFiddle中的工作示例。

來源

2013-02-13 12:45:00

我也跟着你的建議。但是當我點擊時，瀏覽器控制檯顯示這個錯誤：'Uncaught TypeError：不能很方便地調用undefined' – xan 2013-02-13 12:55:13

Thankyou的方法'appendChild'。 – xan 2013-02-13 12:58:22

很高興幫助:) – 2013-02-13 13:02:20

試試這個JavaScript代碼中動態包含窗體域，刪除

$(document).ready(function() { 
     var max_fields  = 10; 
     var wrapper   = $(".container1"); 
     var add_button  = $(".add_form_field"); 

     var x = 1; 
     $(add_button).click(function(e){ 
      e.preventDefault(); 
      if(x < max_fields){ 
       x++; 
       $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box 
      } 
     else 
     { 
     alert('You Reached the limits') 
     } 
     }); 

     $(wrapper).on("click",".delete", function(e){ 
      e.preventDefault(); $(this).parent('div').remove(); x--; 
     }) 
    });

<div class="container1"> 
<button class="add_form_field">Add New Field &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span></button> 
<div><input type="text" name="mytext[]"></div> 
</div>

參考Demo Here

來源

2017-02-17 08:53:59

動態添加輸入元素以形成

回答

相關問題