动态添加输入元素以形成表单

小编典典

动态添加输入元素以形成表单

javascript

我已经阅读了许多关于动态添加字段集的博客和文章，但是它们都给出了非常复杂的答案。我所需要的不是那么复杂。

我的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通过链接检索用户在字段中填写的整数并显示相应数量的输入字段。

阅读 347

2020-05-01

共1个答案

小编典典

您可以使用onclick事件处理程序来获取文本字段的输入值。确保为字段赋予唯一id属性，以便可以通过document.getElementById()以下方式安全地引用该字段：

如果要动态添加元素，则应有一个放置它们的容器。例如，一个<div id="container">。通过创建新元素document.createElement()，并使用appendChild()将每个元素附加到容器。您可能对输出有意义的name属性感兴趣（例如name="member"+i，<input>对于要以表格形式提交的每个动态生成的s，则可能会感兴趣）。

请注意，您还可以使用创建<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>

2020-05-01