将输入元素动态添加到表单
我读过许多关于动态添加字段集的博客和帖子，但它们都给出了非常复杂的答案。我要求的不是那么复杂。
我的HTML代码：
<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>
因此，用户将在input字段中输入一个整数值（我正在使用javascript检查验证）。点击Fill Details链接，会出现相应数量的输入字段供他输入。我想用javascript实现这一点。
我不是javascript方面的专家。我在想如何通过链接检索用户在input字段中填写的整数，并显示相应数量的输入字段。
共有2个答案
尝试使用此JQuery代码动态地包含窗体、字段和删除/删除行为：
$(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--;
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
您可以使用onclick事件处理程序来获取文本字段的输入值。确保为字段指定了唯一的id属性，以便可以通过document.getElementById（）安全地引用它：
如果要动态添加元素，应该有一个容器来放置它们。例如，a
请注意，您还可以创建
此外，如果希望在每次即将填充容器时清除该容器，可以同时使用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>
-
问题内容： 我已经阅读了许多关于动态添加字段集的博客和文章，但是它们都给出了非常复杂的答案。我所需要的不是那么复杂。 我的HTML代码： 因此，用户将在该字段中输入一个整数值（我正在使用javascript检查验证）。在单击链接时，将出现相应数量的输入字段供他输入。我想使用javascript实现此目的。 我不是javascript专业人士。我在考虑如何通过链接检索用户在字段中填写的整数并显示相应
-
问题内容： 我有以下代码： Angular2中 有什么方法可以将HTML添加到中吗？因为上述内容仅添加到组件HTML的末尾。 我也尝试过： 但这是行不通的，因为@ViewChild指令必须在函数之外，我再也无法控制它了 我也这样尝试过： 我不能做的事情是因为我的内容是动态的并且使用唯一的ID，并且我不能动态使用[innerHtml]（它仅适用于我第一次放入它们的面板，然后其他任何更改都不能再使用i
-
问题内容： 我已经有了一个状态： 现在，我想用新信息对其进行更新。因此，向其添加另一个div。 像这样： 我该怎么做？或者我需要从零开始设置新状态 问题答案： 我认为以组件状态存储jsx组件不是一个好主意。我认为您应该仅以呈现组件所需的状态保存数据。 如果您真的想在状态中存储jsx，为什么不将“对话”属性定义为数组？然后，您可以向其中添加新组件。 但是最好只存储数据，例如“ first”和“ ne
-
问题内容： 我想将通过JSOn格式的URL接收的数据动态附加到我的列表视图中。但是我不知道它是如何工作的。 移动网站以以下格式检索对象： 在.html中，我有一个listview和一个函数，在其中尝试附加接收到的数据。我只展示身体。 也许这很容易，但是我是Web编程的新手，我不知道该如何附加检索到的数据。 有人可以帮我吗？ 问题答案： 这是上述解决方案的jsfiddle（还有一个使用 代替的示例
-
我正在尝试使用Java中的Swing制作一个GUI，它可以执行以下操作： 当按下“添加”按钮时，会创建一个JPanel，并填满图形用户界面的整个宽度。在JPanel中，JLabels将使用FlowLayout来排列，该FlowLayout告诉特定的细节（例如名称、用户ID等）。每当随后按下添加按钮时，我都希望在前面的按钮下添加一个新的JPanel，以便JScrollPane在必要时激活其垂直滚动条
-
添加画笔动态 “画笔”面板提供了许多用于向预设画笔笔尖添加动态（或变化）元素的选项。例如，可以设置在描边路线中改变画笔笔迹的大小、颜色和不透明度的选项。 将动态元素添加到画笔时使用两个组件： 抖动百分比指定动态元素的随机性。如果是 0%，则元素在描边路线中不改变；如果是 100%，则元素具有最大数量的随机性。 “控制”弹出式菜单中的选项指定如何控制动态元素的变化。可以选择不控制元素的变化，按指定数