dynamic添加input元素以形成
我读过很多关于dynamic添加字段集的博客和文章，但是他们都给出了一个非常复杂的答案。 我所需要的并不复杂。
我的HTML代码：
<input type="text" name="member" value="">Number of members: (max. 10)<br /> <a href="#" id="filldetails">Fill Details</a> 因此，用户将在input字段中input一个整数值（我正在使用javascript检查validation）。 点击“ Fill Details链接，将出现相应的input字段数量供他input。 我想用javascript来实现这一点。
我不是在JavaScript的亲。 我在想如何通过链接在input字段中检索用户填入的整数，并显示相应的input字段数。
您可以使用onclick事件处理程序来获取文本字段的input值。 请确保您给该字段一个唯一的id属性，以便您可以通过document.getElementById()安全地引用它：
如果你想dynamic添加元素，你应该有一个容器放置它们。 例如，一个<div id="container"> 。 通过document.createElement()创build新的元素，并使用appendChild()将它们附加到容器中。 如果要在表单中提交一个有意义的name属性（例如， name="member"+i ，您可能有兴趣为每个dynamic生成的<input>
注意你也可以用document.createElement('br')创build元素。 如果你只想输出一些文本，你可以使用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中的一个工作示例。
试试这个JavaScript代码来dynamic地包含表单域并删除
$(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 <span style="font-size:16px; font-weight:bold;">+ </span></button> <div><input type="text" name="mytext[]"></div> </div>
请参阅这里演示
