动态添加输入元素以形成
Posted
技术标签:
【中文标题】动态添加输入元素以形成【英文标题】：Adding input elements dynamically to form 【发布时间】：2013-01-29 00:18:01 【问题描述】：我已经阅读了很多关于动态添加字段集的博客和帖子，但它们都给出了非常复杂的答案。我需要的没那么复杂。
我的 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字段中填写的整数并显示相应的输入字段数。
【问题讨论】：
【参考方案1】：您可以使用onclick 事件处理程序来获取文本字段的输入值。确保为该字段提供唯一的id 属性，以便您可以通过document.getElementById() 安全地引用它：
如果你想动态添加元素，你应该有一个容器来放置它们。例如，<div id="container">。通过document.createElement() 创建新元素，并使用appendChild() 将每个元素附加到容器中。您可能有兴趣为每个动态生成的<input>s 输出一个有意义的name 属性（例如name="member"+i，如果它们要在表单中提交。
请注意，您还可以使用document.createElement('br') 创建<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 中查看工作示例。
【讨论】：
我听从了你的建议。但是当我点击时，浏览器控制台显示这个错误：Uncaught TypeError: Cannot call method 'appendChild' of undefined
这个答案很有帮助。以及如何在字段中添加 CSS 类
@Pravin 很高兴它有帮助，请参阅 How do I add a class to a given element?。基本使用input.className += ' someCSSClass';
当我提交表单时，动态生成的新字段不会像原始 HTML 中的其他字段那样提交。它们在视觉上显示，我可以检查它们，但它们不提交。任何想法为什么会发生？
@circle1 确保动态生成的元素确实具有唯一的name 属性。只有具有 name 属性的表单元素才会在提交表单时传递其值。【参考方案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>【讨论】：
也许我做错了什么，但在我的情况下，在此表单的文本字段中按 Enter 键将导致“添加新字段”按钮的功能被触发，这可能是不受欢迎的行为。 ..<button type="button" ...> 问题解决了。
您好！当我去保存动态输入的数据时，如何将它们全部恢复？以上是关于动态添加输入元素以形成的主要内容，如果未能解决你的问题，请参考以下文章