动态添加输入元素以形成

我已经阅读了许多关于动态添加字段集的博客和文章，但他们都给出了一个非常复杂的答案。我所需要的并不复杂。动态添加输入元素以形成

我的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

动态添加输入元素以形成

回答

相关问题